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;
}

 

IE не поддерживает команду для вывода скругленных углов.

 

 

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;
}

 

IE не поддерживает команду для вывода тени элемента.

 

 

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;
}

 

Команда RGBA не поддерживается IE.

 

 

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;
}

 

Колонка номер 1

Колонка номер 2

 

 

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;
}

 

Данный элемент имеет ширину 200px и отступы 10px, а значит, общая ширина его составляет 220px при использовании стандартной модели прямоугольника.

 

Команда 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;
}

 

Данный элемент также имеет ширину 200px и отступы 10px, но отступы включены в ширину элемента, поэтому оно составляет 200px.

 

 

7. Обводка

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

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

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

 

C помощью комбинации рамки и обводки можно создавать вокруг элемента две рамки разного цвета.

 

 

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));
}

 

Градиент может содержать много значений color-stop,  что позволяет организовывать сложные композиции.

 

 

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

 

 

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: /www.webcredible.co.uk/user-friendly-resources/web-dev/css3.shtml#
Перевел: Сергей Фастунов
Урок создан: 27 Декабря 2010
Просмотров: 40280
Правила перепечатки


5 последних уроков рубрики "CSS"

^ Наверх ^