Фильтр DropShadow
Фильтр DropShadow дублирует контент элемента и смещает дубль на заданное расстояние, создавая иллюзию отбрасываемой тени.
Для браузеров IE 5.5-7 фильтры можно подключать в CSS документ с помощью CSS свойства filter. В IE8+ для этого предусмотрено вендорное CSS свойство -ms-filter. Причем из-за особенностей синтаксического анализатора IE8 их порядок имеет значение: -ms-filter должен идти первым.
Синтаксис
div {
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow()";
filter:progid:DXImageTransform.Microsoft.DropShadow();
}
Параметры отделяются друг от друга запятой. Параметр состоит из двух частей: имени параметра и его значения, разделенных знаком равно. Значение параметра может быть взято в кавычки.
Параметры фильтра
| Параметр | Описание | Возможные значения | Значение по умолчанию |
|---|---|---|---|
| enabled | флаг, управляющий фильтром |
|
true |
| color | цвет тени |
Код цвета записывается в формате #AARRGGBB, где AA — альфа-канал (00 — абсолютно прозрачный, FF — абсолютно непрозрачный, т.е. 256 уровней прозрачности тени), RRGGBB — обычная RGB запись цвета. |
#FF404040 |
| offX | смещение тени в пикселях по оси x |
|
5 |
| offY | смещение тени в пикселях по оси y |
|
5 |
| positive | флаг, определяющий будет ли тень создаваться для непрозрачных пикселей элемента или для прозрачных пикселей элемента |
|
true |
Примеры
Для элемента задается полупрозрачная (альфа-канал 80) тень цвета #0f0, смещенная на 10px влево и на 7px вверх:
div {
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#8000ff00, offX=-10px, offY=-7px)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=green, offX=-10px, offY=-7px);
}
Для прозрачного элемента задается желтая тень смещенная на 7px вправо и 9px вниз:
div {
-ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=yellow, offX=7px, offY=9px, positive=false)";
filter:progid:DXImageTransform.Microsoft.DropShadow(color=yellow, offX=7px, offY=9px, positive=false);
}