Столкнулся недавно с темой для WordPress, где активно использовался CSS3, пришлось разбираться с новым стандартом, с его основными нововведениями. Не все браузеры поддерживают полностью все свойства, но на основных, самых распространенных, я хочу остановиться подробнее.
Border-radius
Итак, border-radius – на мой взгляд, самое впечатляющее свойство нового стандарта. То, что раньше делалось картинками, теперь можно внедрить проще, с помощью этого свойства можно задавать закругленные края блоку. Обратите внимание на иллюстрацию ниже – Firefox и браузеры на движке Webkit (это Google Chrome и Safari) просят для себя отдельного указания свойства. Доля этих браузеров очень высока, поэтому с этим приходится мириться, но тенденция разделения мне очень не нравится.
Border-radius
Интересная особенность – для каждого угла блока можно указать свой радиус скругления, что дает очень интересный результат. Блоки можно сделать несимметричными, есть где разгуляться фантазии.
Border-radius разные значения
Text-shadow
text-shadow – второе, что меня «зацепило», к тексту на странице можно применять тень. На данный момент очень активно используется в интерфейса, где создает «вдавленный» текст, модный сегодня.
text-shadow
Можно указать 4 значения:
- x offset – смещение тени по горизонтали. Отрицательное значение перемещает тень влево.
- y offset – смещение по вертикали. Отрицательное значение переносит тень вверх.
- Blur – размытость тени
- Color – цвет отбрасываемой тени. Можно применять новое свойство CSS3 RGBA, о котором я расскажу чуть ниже.
Небольшое дополнение – есть возможность задавать несколько значений text-shadow, разделяя их запятыми. Например, вот пример кода, результат ниже на картинке, получается «впрессованный» текст.
|
1
|
text-shadow: 0 1px 0 #fff, 0 -1px 0 #000; |
text-shadow эффект вдавленности
Больше примеров text-shadow c исходным кодом для использования в проектах можно посмотреть тут
RGBA
RGBA – аббревиатура, которая расшифровывается как Red, Green, Blue, Alpha channel. Последнее значение самое интересное, с его помощью можно задавать прозрачность объекта. Свойство можно применять ко всем элементам, имеющим цвет – тексту, рамкам, бэкграунду, теням… Хорошая возможность попробовать отказаться от PNG с его прозрачностью, по крайней мере в тех случаях, когда на первом месте стоит производительность и скорость отдачи контента.
RGBA
Box-shadow
И последнее свойство, о котором сегодня пойдет речь – box-shadow, тень блока.
Box-shadow
Параметры аналогичны свойству text-shadow, отрицательные значения смещений двигают тень влево по х оси и вверх по у оси. Размытие, цвет тени, все точно так же, повторяется ситуация с отдельными параметрами для Firefox и Chrome/Safari.