Практическое введение в CSS 3.0

Теоретический материал.

CSS3 - новая версия каскадных таблиц стилей, которая была сильно расширена, дополнена и переработана:

• Добавлено множество новых селекторов.
• Существенно было переработано позиционирование элементов.
• Была расширена поддержка различных медиа-устройств.
• Появились тени, как от текста, так и от блоков. Раньше этого эффекта можно было добиться путем наложения одного элемента поверх другого со смещением или же с помощью различных фильтров и т.д.
• Появилось скругление углов у блоков. Ранее это реализовывалось при помощи картинок и огромного количества HTML-разметки.
• Также появилась возможность в качестве границ устанавливать изображения.
• Фоны также претерпели изменений. Появилась возможность применения множества фоновых изображений для блока.
• Возможность указания цвета в системе RGBA. Это практически обычный цвет в RGB, но с дополнительным атрибутом прозрачности. RGBA работает только с фоном и никак не затрагивает содержимое.
• Анимация. Ранее анимация элементов достигалась при помощи JavaScript. Теперь это можно делать средствами CSS.

К сожалению, на сегодняшний день еще нет ни одного браузера, который бы поддерживал все возможности новых версий HTML 5.0 и CSS 3.0.

CSS3 Borders

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

Можно рассмотреть следующие свойства границ блоков:

• border-radius
• box-shadow
• border-image

Internet Explorer 9 поддерживает только первые два свойства.

CSS3 Backgrounds

CSS3 предоставляет веб-разработчику существенно больше возможностей для управления свойствами фона.

Для этого используются следующие свойства:

• background-size
• background-origin

Свойство background-size определяет размер фонового изображения в пикселах или процентах от размера родительского элемента.

Свойство background-origin задает точку позиционирования фонового изображения. Это могут быть области: content-box, padding-box или border-box.

Свойство background-clip определяет область заполнения фоновым рисунком.

Текстовые эффекты в CSS3

Реализуются с помощью свойств:

Новые свойства CSS3 Transform

CSS3 Transform позволяет изменять форму, размер и положение элемента.

Для Internet Explorer 9 требуется указание префикса -ms-.

Для Firefox требуется указание префикса -moz-.

Для Chrome и Safari требуется указание префикса -webkit-.

Для Opera требуется указание префикса -o-.

Методы 2D преобразований