САЙТЫ  ПОД  КЛЮЧ
ОНЛАЙН-СЕРВИСЫ СПРАВОЧНИКИ SEO-ИНСТРУМЕНТЫ РАЗВЛЕЧЕНИЯ

Справочник по CSS

Фильтр DropShadow

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+

Краткая информация

Значение по умолчанию Нет.
Наследуется Нет
Процентная запись Не применима
Применяется Ко всем элементам.

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

Добавляет к элементу тень, а также её направление и цвет.

Синтаксис

filter: progid:DXImageTransform.Microsoft.DropShadow(параметры)

Параметры

enabled
Включает или выключает фильтр. Значение true разрешает использование фильтра, false запрещает.
color
Цвет тени.
offX
Смещение тени по горизонтали. Положительное значение смещает тень вправо, отрицательное влево. По умолчанию равно 5.
offY
Смещение тени по вертикали. Положительное значение смещает тень вниз, отрицательное вверх. По умолчанию равно 5.
positive
Определяет, как должна отбрасываться тень. Значение true устанавливает тень от непрозрачных участков, false от прозрачных.

Параметры внутри фильтра перечисляются через запятую в любом порядке.

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>filter</title>
  <style>
   .opacity { 
    border: 1px solid #000;
    /* Тень у первой картинки */
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#333333);
   }
   .transparent { 
    margin-left: 20px;
    /* Тень от прозрачных участков у второй картинки */
    filter: progid:DXImageTransform.Microsoft.DropShadow(color=#cccccc, positive=false);
   }
  </style>
 </head> 
 <body>
  <p><img src="images/igels.png" alt="Ёжик" class="opacity">
  <img src="images/clover.png" alt="Клевер" class="transparent"></p> 
 </body>
</html>

Результат данного примера показан на рис. 1. Первый рисунок не содержит прозрачных участков, второй содержит, поэтому тень отбрасывают именно они, поскольку задан параметр positive.

Добавление тени

Рис. 1. Добавление тени

Браузеры

В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.

Internet Explorer 9 не добавляет фильтры к элементам при печати документа.

Справочник по CSS. Версия 7.0 от 5.11.12

© 2002–2012 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru

htmlbook.ru


Дежурная шутка

Парадокс Интернета: он соединяет людей, находящихся далеко, но разъединяет с теми, кто находится рядом.


Наши реквизиты
WMID: 309688839848
WMR: R325885159214
E-mail: 
  BL:Бизнес-уровень [BL]
QR-код сайта
Онлайн-радио
Больше радиостанций