Софкейз

В этой статье я хочу рассказать про некоторые свойства CSS3, а именно про такие как: border-radius, box-shadow, text-shadow и множественные фоны. Всем им есть применение, я все чаще замечаю их использование на зарубежный сайтах, даже в дизайне моего блога используется text-shadow и border-radius, а вот с сайтами юанета и рунета, все очень плохо. Все свойства указаные в этой статье поддерживаются в Google Chrome, Safari, Mozilla Firefox и Opera.

Border Radius

Данное свойство используется для закругление углов блочных элементов. Синтаксис у него простой, как и у margin либо padding. Также это свойство имеет под свойства: border-radius-topleft (верхний левый угол), border-radius-topright (верхний правый угол), border-radius-bottomleft (нижний левый угол), border-radius-bottomright (нижний правый угол).

Text Shadow

Я до сих пор помню как я подставлял под необходимый мне текст блок с таким же содержимым и смещал его на один пиксель вниз и вправо, и все это лишь для того, чтобы добиться красивого эффекта тени. Теперь этого делать не приходится ведь есть свойство text-shadow.

Синтаксис у него простой: text-shadow: 1px 1px 0px #000;
Первый параметр смещение тени по оси x, второй по оси y, третий параметр размытие, и четвертый параметр это цвет тени.

Box Shadow

Это свойство полностью аналогично свойству text-shadow, только применяется к блочным элементам, а не к тексту. Синтаксис и поддержка в браузерах также аналогичны к свойству text-shadow.

Множественные фоны

Еще одно интересное свойство, его использование очень легкое и простое. Объявление фона происходит аналогично спецификации CSS2.1, только дополнительные фоны нужно указывать через запятую.

background-image: url('url_image_1'), url('url_image_2');
background-repeat: no-repeat, no-repeat;
background-position: top left, top right;

Примечания для новичков

Как вы можете видеть в примерах я описывал свойства без всяких приставок, которые все еще обязательны для поддержки этих свойств в различных браузерах, пожалуйста не забывайте о них. Приставка -o- для Opera, приставка -moz- для Mozilla Firefox, приставка -webkit- для Safari и Google Chrome (некоторые свойства уже понимает и без приставки). Для множественных фонов приставки не нужны.