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

« Предыдущая запись
 
  Следующая запись »
 

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

box-shadow: 1px 2px;
-moz-box-shadow: 1px 2px;
-webkit-box-shadow: 1px 2px;

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

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

box-shadow: inset 1px 2px 3px 4px #ff9900;
-moz-box-shadow: inset 1px 2px 3px 4px #ff9900;
-webkit-box-shadow: inset 1px 2px 3px 4px #ff9900;

Итак,

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

Примеры

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

box-shadow: 4px 2px;
-moz-box-shadow: 4px 2px;
-webkit-box-shadow: 4px 2px;

ShuBlog.ru

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

box-shadow: 4px 4px 5px #007dfc;
-moz-box-shadow: 4px 4px 5px #007dfc;
-webkit-box-shadow: 4px 4px 5px #007dfc;

ShuBlog.ru

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

box-shadow: -4px -4px 5px #007dfc;
-moz-box-shadow: -4px -4px 5px #007dfc;
-webkit-box-shadow: -4px -4px 5px #007dfc;

ShuBlog.ru

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

box-shadow: 6px 7px 0 5px #007dfc;
-moz-box-shadow: 6px 7px 0 5px #007dfc;
-webkit-box-shadow: 6px 7px 0 5px #007dfc;

ShuBlog.ru

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

box-shadow: inset 4px 4px 5px #007dfc;
-moz-box-shadow: inset 4px 4px 5px #007dfc;
-webkit-box-shadow: inset 4px 4px 5px #007dfc;

ShuBlog.ru

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

box-shadow: inset 0 0 #007dfc;
-moz-box-shadow: inset 0 0 #007dfc;
-webkit-box-shadow: inset 0 0 #007dfc;
ShuBlog.ru

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

box-shadow: inset 0 0 2px 3px #007dfc;
-moz-box-shadow: inset 0 0 2px 3px #007dfc;
-webkit-box-shadow: inset 0 0 2px 3px #007dfc;
ShuBlog.ru

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

box-shadow: 0 0 0 5px #007dfc;
-moz-box-shadow: 0 0 0 5px #007dfc;
-webkit-box-shadow: 0 0 0 5px #007dfc;
ShuBlog.ru

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

box-shadow: 0 0 0 2px #fcf900, 0 0 0 4px #53bbfd;
-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;
ShuBlog.ru

 

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

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

$('div').boxShadow('1px 2px 3px #ff9900');

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

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

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

 

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

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

,

1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 2, средний: 5.00 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 4 на запись

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

  1. Вот что и нужно было! Столько проблем отпадает. Раньше ведь только Photoshop тащил… А теперь благодать =)

  2. Дааа, CSS3 и HTML5 действительно очень радуют! Столько полезностей и необходимостей, я бы сказал

  3. Вот в Опере (последние версии) сколько раз замечал баг при использовании box-shadow и hover вместе… Даже не знаю как от этого избавится… Остается рамка от тени после отведения мыши, из-за чего приходится говорить с заказчиком, якобы я здесь не при чем.

  4. хм, не знал.
    Вот бесит десятая опера, чо-то сдали мужики и выпустили гагно с точки зрения вёрстки =/

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии