В предыдущей статье о CSS3 было рассмотрено свойство text-shadow, которое даёт тексту тень (и, при правильном применении, различные эффекты). В этот раз я хочу рассмотреть похожее свойство, которое делает нечто аналогичное для контейнеров типа div. Соответственно, функционал box-shadow очень схож с text-shadow, хотя есть и различия. Итак, начнём с простого примера.
-moz-box-shadow: 1px 2px;
-webkit-box-shadow: 1px 2px;
Итак, во-первых, свойство надо записывать не только как box-shadow, но и дублировать в виде -moz-box-shadow и -webkit-box-shadow. Это всё для того, чтобы тень работала в большинстве браузеров.
Во-вторых, box-shadow принимает минимум два значения: первое (1px) - смещение по горизонтали, второе (2px) - смещение по вертикали. Эти два параметра обязательны, но есть и необязательные параметры, которые можно не указывать.
-moz-box-shadow: inset 1px 2px 3px 4px #ff9900;
-webkit-box-shadow: inset 1px 2px 3px 4px #ff9900;
Итак,
-
первый необязательный параметр, inset, позволяет направить тень вовнутрь блока, а не наружу.
-
второй и третий параметры обязательны и о них было написано выше (смещение по горизонтали и вертикали)
-
четвёртый параметр - размытие тени (действие аналогичное, как и в text-shadow)
-
пятый параметр - радиус тени. Тут поподробнее, т.к. в text-shadow этого не было. При указании радиуса, величина тени увеличится по отношению к размеру блока на указанное число пикселей. Соответственно, если число не указано, то тень будет соответствовать размеру блока
-
шестой параметр - цвет тени. При отсутствии агрумента цвета, берётся цвет текста.
Теперь, чтобы лучше понять работу свойства, просто рассмотрим несколько примеров с краткими пояснениями.
Примеры
1. Простое смещение тени вправо и вниз
-moz-box-shadow: 4px 2px;
-webkit-box-shadow: 4px 2px;
2. Добавляем размытие и цвет тени
-moz-box-shadow: 4px 4px 5px #007dfc;
-webkit-box-shadow: 4px 4px 5px #007dfc;
3. Пробуем отрицательные значения тени
-moz-box-shadow: -4px -4px 5px #007dfc;
-webkit-box-shadow: -4px -4px 5px #007dfc;
4. Увеличиваем размер тени
-moz-box-shadow: 6px 7px 0 5px #007dfc;
-webkit-box-shadow: 6px 7px 0 5px #007dfc;
5. Направляем текст вовнутрь
-moz-box-shadow: inset 4px 4px 5px #007dfc;
-webkit-box-shadow: inset 4px 4px 5px #007dfc;
6. Направляем текст вовнутрь и при этом не смещаем тень
Обратите внимание на следующее. Если мы указываем смещение по нулям, размытие не задаём, то направленная вовнутрь тень не покажется вовсе.
-moz-box-shadow: inset 0 0 #007dfc;
-webkit-box-shadow: inset 0 0 #007dfc;
Но стоит увеличить размер тени и при желании размыть, всё будет как надо.
-moz-box-shadow: inset 0 0 2px 3px #007dfc;
-webkit-box-shadow: inset 0 0 2px 3px #007dfc;
7. Обводка контейнера
В связи с 6 пунктом понятно, что убрав inset, мы получаем обводку контейнера. Напоминаю, что для этого в text-shadow приходилось 4 тени указывать.
-moz-box-shadow: 0 0 0 5px #007dfc;
-webkit-box-shadow: 0 0 0 5px #007dfc;
8. Несколько теней
А в связи с 7 пунктом говорю, что да, можно несколько теней задавать.
-moz-box-shadow: 0 0 0 2px #fcf900, 0 0 0 4px #53bbfd;
-webkit-box-shadow: 0 0 0 2px #fcf900, 0 0 0 4px #53bbfd;
Кроссбраузерность
Как и для text-shadow, на jQuery есть плагин, который позволяет всяким хрюнделям (читай IE - прим.ред.) понимать это свойство (
Сам плагин работает очень просто. Он находит нужный нам контейнер, увеличивает его размер, задаёт цвет и засовывает его под основной блок. Размытие задаётся через специальный фильтр ишака. Вот и всего делов.
А напоследок картинка для поднятия настроения =)
Ссылки по теме
Часть 1. text-shadow: 15 способов применения, кроссбраузерность
Часть 2. box-shadow – тень для контейнеров. Применение и кроссбраузерность
Часть 3. border-radius – rounded corners. Применение и кроссбраузерность
Похожие записи:
15/10/2010 at 12:08 Постоянная ссылка Цитировать
Вот что и нужно было! Столько проблем отпадает. Раньше ведь только Photoshop тащил… А теперь благодать =)
15/10/2010 at 18:48 Постоянная ссылка Цитировать
Дааа, CSS3 и HTML5 действительно очень радуют! Столько полезностей и необходимостей, я бы сказал
30/11/2010 at 23:27 Постоянная ссылка Цитировать
Вот в Опере (последние версии) сколько раз замечал баг при использовании box-shadow и hover вместе… Даже не знаю как от этого избавится… Остается рамка от тени после отведения мыши, из-за чего приходится говорить с заказчиком, якобы я здесь не при чем.
01/12/2010 at 18:19 Постоянная ссылка Цитировать
хм, не знал.
Вот бесит десятая опера, чо-то сдали мужики и выпустили гагно с точки зрения вёрстки =/