Простое волшебство CSS. Урок 1. Скруглённые углы

Статьи Дизайн и верстка

Наверное нет сейчас веб-мастера, который бы не пользовался CSS — каскадным определением стилей. Но немногие знают что CSS это не просто набор правил для стилей вашего сайта, но и полноценный язык программирования. В этой статье собраны некоторые интересные особенности и функциональные возможности этого языка.

Скруглённые углы

Допустим есть необходимость или желание сделать какую-то область сайта текстом или картинкой) со скругленными углами. Например оранжевый цвет. Для этого в фотошопе или любом другом редакторе сделаем квадрат со скругленными краями и нарежем из него четыре угловых элемента: верх-лево, верх-право, низ-лево и низ-право.

Затем мы создаем контейнер div который и будет описывать всю конструкцию, внутри два контейнера div для верхнего и нижнего рядов. Между верхним и нижним рядами мы помещаем наш текст. Левый угол в верхнем и нижнем контернете занят картинкой левого угла и установлен стиль невидимости — display: none;. Это деалется для того, чтобы картинка была невидимой до момента когда определение стиля в CSS сделает ее видимой. Сделано это с целью совместимости в разных броузерах.

<div class=  «roundcont»>
 <div class=  «roundtop»>
	 <img src=  «tl.gif» alt=  «  «
	 width=„15“ height=„15“ class=„corner“ 
	 style=„display: none“ />
 </div>
 <p>Создание веб-сайта — это как рождение нового человека, хочется чтобы он был самым лучшим, самым успешным, чтобы им восхищались и о нем говорили. Хороший интернет проект — это как сад: ухожен, приятен и радует своими дарами..</p>
 <div class=„roundbottom“>
	 <img src=„bl.gif“ alt=  «  «
	 width=„15“ height=„15“ class=„corner“ 
	 style=„display: none“ />
 </div>
</div>	

А в описании стилей мы устанавливаем бэкграунд и правила отображения картинок.

.roundcont {
width: 250px;
background-color: #f90;
color: #fff;
}

.roundcont p {
margin: 0 10px;
}

.roundtop {
background: url (tr.gif) no-repeat top right;
}

.roundbottom {
background: url (br.gif) no-repeat top right;
}

img.corner {
width: 15px;
height: 15px;
border: none;
display: block! important;
}

Результат можно посмотреть на главной странице этого сайта:)

 

CSSинтернетвеб-сайтдизайн 

20.11.2008, 3560 просмотров.