CSS3 box-shadow, тень средствами CSS

CSS3 Рейтинг: 0 Голосов: 0 10123 просмотра
CSS3 box-shadow, тень средствами CSS

Свойство box-shadow позволяет сделать тень от объекта при помощи только CSS3, без использования изображений.
Разберем как это работает, создадим тень от объекта:

Пример 1.


box-shadow



box-shadow:0 0 10px 0 #555555;
-webkit-box-shadow:0 0 10px 0 #555555;
-moz-box-shadow:0 0 10px 0 #555555;


Как Вы видете указаны 4 значения и цвет тени:

   
0 0 10px 0 #555555;

Первое значение (у меня выставлено "0") - сдвиг на X px по горизонтали;
Второе значение - сдвиг на X px по вертикали;
Третье значение (10px) - радиус размытия (X px);
Четвертое значение - радиус растяжения тени (X px);
Ну, и пятое значение - это цвет тени.

Как видите данные задаются одинаково но с тремя разными значениями box-shadow, -webkit-box-shadow и -moz-box-shadow
Это необходимо для понимания свойства разными браузерами, за исключением IE.

Пример 2.



CSS3 тень


Тень или свечение внутрь объекта средствами CSS3:

Что бы направить тень внутрь объекта, для этого нужно указать "inset":
   
box-shadow:inset 0 0 10px 0 #555555;

Браузеры, которые поддерживают это свойство: Firefox, Opera, Chrome, Safari.
В IE объекты будут отображаться без тени.

Комментарии (0)

Нет комментариев. Ваш будет первым!

Случайное в статьях

Как добавить фоновый рисунок в шаблон
Даннаю статью решил написать на оснавании вопроса одного из участников. Как добавит к...
skaz - 0 - 9715
Скачать Artisteer 4.1.0.59861 для Windows
Вышла новая версия Artisteer 4.1.0.59861 для Windows, подробности от разработчиков в...
skaz - 8 - 7744
Установка шаблонов Artisteer на Joomla 3.Х с содержимым
Рассмотрим второй способ как установить шаблон Artisteer на установленную ранее, на...
skaz - 0 - 3035
Как сменить кодировку с UTF-8 на кириллицу
Чтобы поменять кодировку страницы, напимер с UTF-8 на Windows-1251 (кириллицу),...
skaz - 0 - 53156
Плагин Contact Form 7 для WordPress - создание формы обратной связи на блоге
Довольно часто вебмастер не хочет публиковать свои прямые контактные данные на сайте....
skaz - 0 - 6452
Таблица цветов html - таблица html кодов цветов, коды цветов в RGB.
Таблица цветов HTML и кодов RGB , для дизайна. Данная таблица служит для подсказки...
skaz - 0 - 37328