10 самых используемых правил CSS3

В данном обзоре представлены 10 самых популярных правил CSS3, которые уже активно используются в различных проектах.

Большинство из правил требуют использования префикса для соответствующего браузера:

-moz- для браузеров, построенных на основе механизма Mozilla;

-webkit- для браузеров, построенных на основе механизма Webkit.

1. Скругленные углы

Для создания скругленных углов рамки вокруг элемента вместо 4-х изображений используется команда:

#box1 {
	border: 1px solid #699;

	/* для Firefox */
	 -moz-border-radius: 20px;

	/* для Safari и Google Chrome */
	-webkit-border-radius: 20px;
}

2. Тень элемента

Для создания тени от элемента используется команда box-shadow с префиксом для браузера. Нужно задать три параметра и цвет эффекта:

1. Смещение тени по горизонтали - положительное значение означает смещение вправо, а отрицательное - влево.
2. Смещение тени по вертикали - положительное значение для смещения тени вниз, а отрицательное - вверх.
3. Степень размытия тени.

#box2{
	/* Необязательная команда для эффекта тени */
	border:1px solid #699;

	/* для Firefox */
	-moz-box-shadow: 5px 5px 5px #b6ebf7;
	
	/* для Safari и Google Chrome */
	-webkit-box-shadow: 5px 5px 5px #b6ebf7;
}

3. Прозрачность

Прозрачность всегда была трюком. Различные браузеры поддерживали прозрачность с помощью различных команд. Команда RGBA способствует кросс-браузерности кода и имеет более логичный синтаксис. В ней используется 4 параметра: первый, второй и третий являются соответственно  значениями для цветовых каналов красного, зеленого и синего (0-255), а четвертый параметр - значение для альфа канала или прозрачности (0-1).

Для команды RGBA не требуется использовать префиксы браузеров (-moz-, -webkit-):

#box3{
	background-color: rgba(110, 142, 185, .5);
}

Свойство background-color установит нежно голубой цвет для фона с прозрачностью 50% в браузерах, которые поддерживают команду RGBA.

К сожалению Internet Explorer также реализует свойство background-color, но не воспринимает команду RGBA. В нашем примере для отключения использования правила в IE используется псевдо-селектор last-child:

#box3{
	/* Для всех браузеров */
	background-color: #6e8eb9;
}

body:last-child #box3{
	/* IE игнорирует данное правило */
	background-color: rgba(110, 142, 185, .5)!important;
}

4. Колонки

Способность использовать колонки была добавлена в CSS3. Вместо контейнера с плавающими элементами можно установить число колонок, их ширину и правило форматирования:

#box4{
	/* Не обязательная команда для колонок */
	border:1px solid #699;

	/* для Firefox */
	-moz-column-count: 2;
	-moz-column-gap: 20px;
	-moz-column-rule: 1px solid #6e8eb9;

	/* для Safari */
	-webkit-column-count: 2;
	-webkit-column-gap: 20px;
	-webkit-column-rule: 1px solid #6e8eb9;
}

5. Несколько изображений для фона

Использование фоновых изображений всегда было ограничено тем фактом, что CSS допускали только одно фоновое изображение для одного элемента. CSS3 допускает использование нескольких изображений, которые просто надо перечислить через запятую.

Для размещения изображения справа и слева можно использовать следующие команды:

#box5 blockquote{
	background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
	border:1px solid #699;
	padding:0 20px;
}

Данный набор команд будет неверно выводиться в Internet Explorer, потому что он не воспринимает 2 фоновых изображения для одного элемента. Поэтому изменим код, чтобы игнорировать IE:

#box5 blockquote{
	/* Для всех браузеров */
	background:none;
	padding:0 20px;
}
body:last-child #box5 blockquote p{
	/* IE игнорирует данное правило */
	background:none
}
body:last-child #box5 blockquote{
	/* IE игнорирует данное правило */
	background:url(/i/quotel.gif) no-repeat 0 0, url(/i/quoter.gif) no-repeat 100% 0;
}

6. Модель прямоугольника

Каждый элемент на странице выводится в соответствии с моделью прямоугольника. Стандартная модель прямоугольника W3C теперь является изменяемым свойством и устанавливается с помощью команды CSS3 box-sizing: content-box.

#box6{
	width: 200px;
	padding: 10px;

	/* для Firefox */
	-moz-box-sizing: content-box;
	/*для IE8 */
	box-sizing: content-box;
	/* для Safari */
	-webkit-box-sizing: content-box;
}

Команда CSS3 box-sizing также принимает параметр border-box, который устанавливает использование модели прямоугольника в которой, отступы включаются в ширину элемента, как в Internet Explorer 5!:

#box6{
	width: 200px;
	padding: 10px;

	/* для Firefox */
	-moz-box-sizing: border-box;
	/*для IE8 */
	box-sizing: border-box;
	/* для Safari */
	-webkit-box-sizing: border-box;
}

7. Обводка

Обводка включена в спецификацию CSS3 и позволяет использовать для одного элемента и рамку и обводку.

Свойства обводки идентичны свойствам рамки, но дополнительное смещение позволяет смещать обводку наружу или внутрь элемента:

#box7{	
	border:1px solid #000;
	outline:1px solid #699;
	outline-offset: -9px;
}

8. Фоновые градиенты

Фоновые градиенты CSS3 являются очень мощным и гибким инструментом, с помощью которого можно создавать сложные композиции. В примере демонстрируется градиент снизу на 20% высоты элемента для браузера FireFox:

#box8 {
	/* для Firefox */
	background: -moz-linear-gradient(bottom, #b6ebf7, #fff 20%);
}

Safari использует концепцию со значениями color-stop:

#box8 {
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #b6ebf7), color-stop(0.20, #fff));
}

9. Вращения

CSS3 позволяет вращать элементы с помощью команды  transform со свойством rotate,  для которого задается угол вращения в градусах:

#box9 {
	-moz-transform: rotate(2deg);
	-webkit-transform: rotate(2deg);
}

10. Анимации

Последний пункт нашего обзора действует только в Safari и Firefox 4 beta, которые поддерживают трансформации элементов. Трансформации включают вращения, переходы между элементами, позволяют задавать временные параметры для преобразования и многое другое!

Простым примером может служить изменение эффекта при наведении курсора мыши на ссылку: плавное изменение цвета от одного к другому.

Сначала определяем цвет ссылки:

.box a {
	color: #0f0;
}

Устанавливаем цвет и свойства для анимации с помощью transition-property:

box10 a:hover {
	color: #0f0;
	-moz-transition-property: color;
	-webkit-transition-property: color;
}

Устанавливает продолжительность анимации:

#box10 a:hover {
	color: #0f0;
	-moz-transition-property: color;
	-webkit-transition-property: color;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
}

Устанавливаем тип анимации:

#box10 a:hover {
	color:#31801f;
	-moz-transition-property: color;
	-webkit-transition-property:  color;
	-moz-transition-duration: 0.5s;
	-webkit-transition-duration: 0.5s;
	-moz-transition-timing-function: ease;
	-webkit-transition-timing-function: ease;
}

Заключение

CSS3 открывает новую эру в веб дизайне. С помощью его команд можно создавать впечатляющие проекты.