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
Просмотров: 38218
Правила перепечатки


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

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 27 Декабря 2010 21:09
    krote
    А нет такого чтоб и для оперы ещё было?
  • 27 Декабря 2010 21:31
    notbot
    1. Для оперы забыли border-radius 2. Для оперы забыли box-shadow 4. Что это даёт? 6. "устанавливает использование модели прямоугольника в которой, отступы включаются в ширину элемента" Как меня эти запятые достали... 7. outline - не CSS3, работает даже в 6 осле Если что-то пишете, пишите качественно.
  • 27 Декабря 2010 21:36
    vitalya
    всё это классно конечно ,но работать этим в полную силу ещё очень рано,а ie нужно вобще ликвидировать раз microsoft не хочет развиваться.
    • 27 Декабря 2010 22:17
      notbot
      Закидать тухлыми яйцами...
      • 28 Декабря 2010 01:26
        ne0h
        Согласен
      • 13 Января 2011 17:23
        eko24ive
        Эти дегенераты вообще толком нифига сделать немогут. Антивирус их вообще полная .....)
  • 27 Декабря 2010 22:27
    Revy
    а нафига так танцевать с бубном вокруг прозрачности если она давно уже используется как opacity: 0.2; и без всяких бубнов
    • 27 Декабря 2010 23:38
      Expert
      свойство опэсити применяется для всего блока! то есть если внутри текст, то он будет .2 прозрачности!! но а когда нужно только для фона применить прозрачность, то только через рджба!!! или фоновое изображение пнг формата- это вариант кроссбраузерный
      • 3 Апреля 2011 18:51
        djvergon
        фоновое изображение пнг формата- это вариант кроссбраузерный
        для ie6 нет
    • 28 Декабря 2010 11:55
      notbot
      Имеется ввиду прозрачный фоновый цвет под непрозрачным блоком. Кстати, opacity - тоже правило CSS3, просто оно уже стало нормой.
  • 28 Декабря 2010 00:05
    MopuC
    -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;
    Мне одному страшно становится, не? Говорить о этих возможностях стоит лишь тогда, когда не потребуются эти префиксы. ИМХО естественно :)
    • 28 Декабря 2010 11:56
      notbot
      Всё нормальное - с префиксами, даже круглые уголки, а я, например, их использую уже вовсю.
  • 28 Декабря 2010 08:45
    bibo85
    А Opera обделили что ли???? как так...прошу добавить правила)): border-radius: 20px; и т.д...а то не хорошо как-то получается:)
    • 28 Декабря 2010 11:57
      notbot
      По-моему на эти правила также перешёл webkit. Частично.
  • 28 Декабря 2010 10:52
    kesha_php
    Большое Спасибо)Обзор понравился) Люди! Уважаемые! Забудьте пожалуйста всё кроме Google Hrome, ну не издевайтесь вы над разработчиками!!!!
    • 28 Декабря 2010 11:58
      notbot
      *Chrome. Присоединяюсь к пожеланию. Ну или если хотите мучиться - юзайте Safari.
  • 28 Декабря 2010 12:13
    Денис Никаноров
    Пусть сначала там формат весь оформят по-человечески и опять же ие хоть что-то начнет поддерживать, а то на данный момент какой-то болт, так как в норм браузерах более менее все работает, а осел как всегда!
  • 28 Декабря 2010 12:26
    f0rt1
    Лучше изображениями использовать, и для всех браузеров будет отлично!
  • 28 Декабря 2010 13:34
    DeannRie
    Уже используют такие значения для разных браузеров, для Opera: -о-, для Chrome: -chrome-, для IE9: -ms-, для мозиллы и сафари как было и прежде, ничего не изменилось ;) Неучи))))
  • 28 Декабря 2010 14:33
    wollk
    Капец IE вообще не чего не поддерживает, а раньше, когда я только начал пользоваться интернетом - я его использовал. Сейчас Лису использую)). Но я думаю IE догонит нормальные браузеры
    • 28 Декабря 2010 22:20
      DeannRie
      уже догнал, ИЕ9 понимает как цсс3 так и хтмл5 ;)))
  • 28 Декабря 2010 19:03
    ak_soft
    Если этими техниками пользоваться. То вверху сайта крассными большими буквами нужно писать "Сайт разработан для браузера фаир фокс", ибо я смотрю всё работает только в фф.
    • 28 Декабря 2010 22:19
      DeannRie
      полностью согласен))))
  • 28 Декабря 2010 23:44
    ispaih
    а как в css вбивать размер фонового изображения
    • 13 Февраля 2011 12:18
      Overlord888
      вроде по обычному: width - длина height - высота можно в px, em и %
  • 3 Января 2011 02:39
    Alex_sin
    Интересно, сколько уроку. год? меньше?
^ Наверх ^