Основы работы с XHTML и CSS
Фильтр shadow()
Такие принципы вывода падающей тени применимы и для фильтра shadow(). Изображение, к которому добавляется тень, должно находиться внутри контейнера, которое имеет достаточный размер для размещения изображения и его тени. Фильтр применяется к контейнеру, содержащему изображение. Свойства и значения, требуемые фильтру shadow(), показаны в таблице 5.7.
| filter:shadow() | color=color direction=n strength=n |
С фильтром shadow() связаны три свойства. Свойство color=color задает цвет тени как название цвета или как числовое значение. Свойство direction=n задает угол тени в градусах (направление вверх соответствует 0 градусов). Свойство strength=n задает длину тени в пикселях. Следующий код создает контейнер <div>, окружающий изображение неизвестного размера, и применяет к контейнеру фильтр shadow().
<div style="height:0px; filter:shadow(color=gray, direction=135, strength=15)"> <img src="GallatinValley.jpg" style="margin-right:15px; margin-bottom:15px"/> </div>
Рис. 5.34. Изображение, выводимое с фильтром shadow(), который применяется к его контейнерному тегу
Эффект тени можно применять к символам текста , так же, как к изображениям. Текст должен находиться внутри контейнера, размеры которого должны быть достаточны для размещения текста и его тени. В следующем примере контейнер <span> создает строку текста с тенью. Так как тег <span> имеет размер по умолчанию, достаточный только для размещения своего содержимого, то размер этого контейнерного тега надо увеличить, чтобы разместить и вложенный текст, и его тень.
<span style="width:350px; height:45px; font-size:24pt; font-weight:bold; filter:shadow(color=silver,direction=135,strength=7)"> A Shadowed Text String </span>
Рис. 5.35. Текст, выводимый с фильтром shadow(), который применяется к контейнерному тегу
