Основы работы с XHTML и CSS


Фильтр shadow()


Такие принципы вывода падающей тени применимы и для фильтра shadow(). Изображение, к которому добавляется тень, должно находиться внутри контейнера, которое имеет достаточный размер для размещения изображения и его тени. Фильтр применяется к контейнеру, содержащему изображение. Свойства и значения, требуемые фильтру shadow(), показаны в таблице 5.7.

Таблица 5.7. Свойства и значения фильтра shadow()

СвойствоЗначение
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>

Изображение, выводимое с фильтром shadow(), который применяется к его контейнерному тегу

Рис. 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>

Текст, выводимый с фильтром shadow(), который применяется к контейнерному тегу

Рис. 5.35.  Текст, выводимый с фильтром shadow(), который применяется к контейнерному тегу




Начало  Назад  Вперед