Свойства CSS3! Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность

В предыдущей статье о CSS3 было рассмотрено свойство text-shadow, которое даёт тексту тень (и, при правильном применении, различные эффекты). В этот раз я хочу рассмотреть похожее свойство, которое делает нечто аналогичное для контейнеров типа div. Соответственно, функционал box-shadow очень схож с text-shadow, хотя есть и различия. Итак, начнём с простого примера.

Итак, во-первых, свойство надо записывать не только как box-shadow, но и дублировать в виде -moz-box-shadow и -webkit-box-shadow. Это всё для того, чтобы тень работала в большинстве браузеров.

Во-вторых, box-shadow принимает минимум два значения: первое (1px) - смещение по горизонтали, второе (2px) - смещение по вертикали. Эти два параметра обязательны, но есть и необязательные параметры, которые можно не указывать.

Итак,

• первый необязательный параметр, inset, позволяет направить тень вовнутрь блока, а не наружу.
• второй и третий параметры обязательны и о них было написано выше (смещение по горизонтали и вертикали)
• четвёртый параметр - размытие тени (действие аналогичное, как и в text-shadow)
• пятый параметр - радиус тени. Тут поподробнее, т.к. в text-shadow этого не было. При указании радиуса, величина тени увеличится по отношению к размеру блока на указанное число пикселей. Соответственно, если число не указано, то тень будет соответствовать размеру блока
• шестой параметр - цвет тени. При отсутствии агрумента цвета, берётся цвет текста.
  Теперь, чтобы лучше понять работу свойства, просто рассмотрим несколько примеров с краткими пояснениями.

Примеры

1. Простое смещение тени вправо и вниз

2. Добавляем размытие и цвет тени

3. Пробуем отрицательные значения тени

4. Увеличиваем размер тени

5. Направляем текст вовнутрь

6. Направляем текст вовнутрь и при этом не смещаем тень
Обратите внимание на следующее. Если мы указываем смещение по нулям, размытие не задаём, то направленная вовнутрь тень не покажется вовсе.

Но стоит увеличить размер тени и при желании размыть, всё будет как надо.

7. Обводка контейнера
В связи с 6 пунктом понятно, что убрав inset, мы получаем обводку контейнера. Напоминаю, что для этого в text-shadow приходилось 4 тени указывать.

8. Несколько теней
А в связи с 7 пунктом говорю, что да, можно несколько теней задавать.

Кроссбраузерность

Как и для text-shadow, на jQuery есть плагин, который позволяет всяким хрюнделям (читай IE - прим.ред.) понимать это свойство (ссылка на плагин и отдельное спасибо за плагин одной очень интересной девушке-программисту). Но, насколько я понимаю, функционал свойства ограничен смещением, размытием и цветом, т.е. таким же набором, как и для text-shadow. Применяется плагин просто:

Сам плагин работает очень просто. Он находит нужный нам контейнер, увеличивает его размер, задаёт цвет и засовывает его под основной блок. Размытие задаётся через специальный фильтр ишака. Вот и всего делов.

А напоследок картинка для поднятия настроения =)

Ссылки по теме

Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
Часть 3. border-radius – rounded corners. Применение и кроссбраузерность
 

box-shadow, css3

(голосов: 2, средний: 5.00 из 5)