CSS3. Обзор новых свойств

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

Border-radius

Итак, border-radius – на мой взгляд, самое впечатляющее свойство нового стандарта. То, что раньше делалось картинками, теперь можно внедрить проще, с помощью этого свойства можно задавать закругленные края блоку. Обратите внимание на иллюстрацию ниже – Firefox и браузеры на движке Webkit (это Google Chrome и Safari) просят для себя отдельного указания свойства. Доля этих браузеров очень высока, поэтому с этим приходится мириться, но тенденция разделения мне очень не нравится.

Интересная особенность – для каждого угла блока можно указать свой радиус скругления, что дает очень интересный результат. Блоки можно сделать несимметричными, есть где разгуляться фантазии.

Text-shadow

text-shadow – второе, что меня «зацепило», к тексту на странице можно применять тень. На данный момент очень активно используется в интерфейса, где создает «вдавленный» текст, модный сегодня.

Можно указать 4 значения:

• x offset – смещение тени по горизонтали. Отрицательное значение перемещает тень влево.
• y offset – смещение по вертикали. Отрицательное значение переносит тень вверх.
• Blur – размытость тени
• Color – цвет отбрасываемой тени. Можно применять новое свойство CSS3 RGBA, о котором я расскажу чуть ниже.

Небольшое дополнение – есть возможность задавать несколько значений text-shadow, разделяя их запятыми. Например, вот пример кода, результат ниже на картинке, получается «впрессованный» текст.

Больше примеров text-shadow c исходным кодом для использования в проектах можно посмотреть тут

RGBA

RGBA – аббревиатура, которая расшифровывается как Red, Green, Blue, Alpha channel. Последнее значение самое интересное, с его помощью можно задавать прозрачность объекта. Свойство можно применять ко всем элементам, имеющим цвет – тексту, рамкам, бэкграунду, теням… Хорошая возможность попробовать отказаться от PNG с его прозрачностью, по крайней мере в тех случаях, когда на первом месте стоит производительность и скорость отдачи контента.

Box-shadow

И последнее свойство, о котором сегодня пойдет речь – box-shadow, тень блока.

Параметры аналогичны свойству text-shadow, отрицательные значения смещений двигают тень влево по х оси и вверх по у оси. Размытие, цвет тени, все точно так же, повторяется ситуация с отдельными параметрами для Firefox и Chrome/Safari.

gering111.com