CSS3: свойства и генераторы
Статья предоставлена форумом http://other-wise.ru/
Автор - Ghоst

Язык каскадных таблиц стилей, знакомый сейчас многим, появился вследствие необходимости стандартизации описания и задания внешнего вида веб-страницы, тогда как структура ее задавалась с помощью языка разметки HTML, чей стандарт был утвержден еще в 1995 году. CSS является WEB-стандартом, который развивался стараниями Хокона Виума Ли и Берта Боса.
Но нас интересует не дела давно минувших дней, а ныне развивающийся стандарт третьего поколения, CSS3. Мне захотелось сделать обзор не только функций, но и сервисов, служащих таким непростым целям, как упрощение жизни тем, кто хочет применить на практике все возможности css3.

Границы – border.

border-radius – закругленные края. Работает в браузерах: Mozilla Firefox – 3.0 и выше, Google Chrome – 4.0 и выше, Safari – 3.1 и выше, IE – 9 и выше.
Радиус может быть прописан либо для всех углов, либо для каждого в отдельности – верхний левый, верхний правый, нижний левый, нижний правый. Но сейчас, в пору интернет-технологий, вам не нужно мучиться и прописывать все самим. Сайт http://border-radius.com/ позволяет вам прописать закругление уголков и просто скопировать полученный код.

border-image – изображение на границах.
Многие хотят создать рамку из изображения, но немногие знают, как это сделать. Сервис http://border-image.com позволяет просто и быстро разобраться с этим. Итак, прежде всех дел: свойство border-image и схожие свойства, которые генерируются сервисом, поддерживаются браузерами Safari 3 и выше, Chrome 1 и выше, Firefox 1.0 и выше, частично Opera с версии 10.5 по 11.01.
Вам нужно загруженное в интернет изображение рамки, ссылку на которое нужно проставить в первое окошко. Дальше идут свойства. Offset – оффсет, задает область отступа от верхнего, правого, нижнего и левого края соответственно, часть изображения внутри которой и будет употребляться в качестве верхней, правой, нижней и левой части рамки. Толщина рамки – border-size – особого рассмотрения не требует, я думаю. Задается бегунками, в пикселях.
border-repeat – повторяемость изображения для рамки – имеет три различных значения:

border-colors – градиентные границы. К сожалению, поддерживаются только Firefox версии 3.5 и выше. Не применяется для точечных и пунктирных границ. Если толщина границы шире одного пикселя, то для каждой линии границы в пиксель шириной можно задать свой цвет, начиная от внешних уровней границы к внутренним.

box-shadow – тени элементов. Работает в браузерах: Mozilla Firefox – 3.5 и выше, Google Chrome – 4.0 и выше, Safari – 3.1 и выше, IE – 9 и выше, Opera – 10.5 и выше.
Тень можно создать с помощью сервиса http://css3generator.com/ , выбрав в выпадающем списке соответствующее значение.
Inset – параметр, задающий, является ли тень внутренней или нет. Дальше идут значения горизонтального и вертикального размера тени, ее размытия и размаха. Последним идет цвет тени. Его можно задать двумя способами: в обычном для HTML виде #шестизначное_значение, выбрав в выпадающем списке HEX, или же в условиях RGBA – яркость красной, зеленой и синей составляющей цвета и альфа-канал, то есть прозрачность тени. В палитрах многих фото-редакторов всегда можно посмотреть, какие значения R, G, B соответствуют выбранному цвету.

Текстовые и блочные эффекты

Тень текста большинство продвинутых пользователей делать уже научилось, поэтому разобраться с интерфейсом создания тени для текста сервиса http://css3generator.com/ (пункт Text Shadow в выпадающем меню) им не составит сложности. Перейдем к другим проблемам.

Мультиколоночность – задается четырьмя свойствами: количеством колонок, их шириной, разделителем и пробелами между колонками.
Работает это свойство только в Firefox версии 3 и выше, Google Chrome 3 и выше и Safari 3.1 и выше и Opera 11.10.
Сервис http://css3generator.com/ предоставляет возможность создания мультиколоночности (multiple columns в выпадающем списке). Однако здесь можно указать лишь количество колонок и пробел между ними (Column Gap).
Разделитель между колонками column-rule, имеет ширину, стиль и цвет. Разделитель строится по принципу border, и наследует его стили – solid, dashed и так далее. Каждое свойство можно задавать как отдельно:

так и все вместе:

Трансформации – изменение размера (scale), вращение (rotate), перемещение (translate), наклон (skew).
Работает в IE 9.0 и выше, Firefox 3.5 и выше, Google Chrome 3.0 и выше , Safari  4.0 и выше, Opera версии 10.5 и выше. Идеально подходит для изменения состояния объекта при наведении.
Сервис http://css3generator.com/ во вкладке transform позволяет провести над объектом все виды трансформаций. Значение изменения размера идет в долях от первоначального, вращение и наклон – в градусах, причем наклон – в градусах для каждой из осей, горизонтальной и вертикальной, перемещение – в пикселях по осям.

Фоны – background

Множественный фон – multiple background.
Работает в Mozilla Firefox (версия 3.6+), Safari/Chrome 1.0/1.3 и выше, Opera (10.5+) и даже в Internet Explorer 9.0 и выше.
Множественный фон основывается на слоях. Для того, чтобы прописать такой фон, необходимо хорошо знать все свойства, которыми обладает фон: ссылка на изображение, позиционирование, закрепленность и повторяемость, а так же помнить небольшое правило – при прописывании слоев фона первый по порядку в описании является верхним, а остальные  наслаиваются под него по порядку сверху вниз (а точнее, вглубь). К сожалению, сервиса для создания множественного фона нет, но вы можете попробовать сами, основываясь на примере:

Градиентный фон – бывает линейным и радиальным. Наиболее сложная вещь в css3, на мой взгляд, поскольку имеет очень много параметром.
Наиболее простым трехцветным генератором градиентного фона является этот. Вы вводите значения начального, среднего и конечного цвета и смотрите результат. Здесь находится версия для двухцветного градиента.
Все остальные сервисы по обыкновению более сложны, например, эти два для создания радиального и линейного градиента.

Конечно же, здесь рассмотрены не все возможности css3, однако даже этих вкупе с наличием простых генераторов для них, хватит для того, чтобы вы сделали свой сайт или форум еще более уникальным. Однако следите за тем, что не все свойства одинаково хорошо отображаются во всех браузерах. Удачи, интересных решений и вдохновения.

Теги: урок, css, css3, генератор стиля