Визуальные фильтры
В Dynamic HTML под фильтром принято понимать некую функцию, так или иначе преобразующую внешний вид элемента на Web-странице. Преобразование осуществляется непосредственно в браузере, т. е. на стороне клиента (подключение сервера не требуется).
Следует отметить, что применение визуальных фильтров возможно только в браузерах Internet Explorer 4.x и выше. Тем не менее, горячие поклонники Microsoft Internet Explorer или разработчики, ориентирующиеся при создании Web-сайтов на показатели статистики в отношении применяемых браузеров, с помощью средств динамического HTML смогут существенно улучшить внешний вид своих электронных данных.
Визуальные динамические фильтры можно применить не ко всем элементам HTML-документа, а только к тем, которые способны определить в браузере блок прямоугольного вида. Чаще всего фильтры применяются к изображениям.
Формат записи фильтра достаточно прост и аналогичен правилам задания войств элементов с помощью тега {style}. Запись производится в следующем виде:
filter: название_фильтра(параметры),
где параметры определяются в стандартном для HTML виде:
название_параметра=значение_параметра
Прежде чем перейти к рассмотрению фильтров и возможностей их применения, необходимо сказать, что, во-первых, допускается использование сразу нескольких фильтров (если это не противоречит окончательному визуальному результату отображения элемента), во-вторых — при указании фильтров, не имеющих никаких параметров, присутствие круглых скобок (без пробелов) после названия фильтра обязательно.
При использовании фильтров следует помнить, что некоторые из них имеют общие свойства, влияющие на характер действия заданных параметров фильтра. К таковым относятся enabled (со значением true или false, соответственно разрешающим или запрещающим применение фильтра, присоединенного к элементу документа), direction (определяет направление действия таких фильтров, как shadow, blur и др.), strength (задает интенсивность действия фильтра со значением от 0 до 255) и т. п. Часть фильтров помимо общих свойств имеют различные методы их определения (например, фильтр light).
Браузер Internet Explorer 4.x (и выше) поддерживает достаточно большое количество фильтров, широкие возможности по настройке которых представляют применение этой технологии в более выгодном свете.
Характеристика визуальных фильтров, работающих в браузере Internet Explorer:
|
Название фильтра |
Описание действия |
|
alpha |
Определение степени прозрачности объекта |
|
blendTrans |
Настройка контрастности отображения объекта |
|
blur |
Размытие объекта |
|
chroma |
Установление прозрачности пикселям заданного цвета |
|
dropShadow |
Создание сплошного силуэта объекта |
|
flipH |
Зеркальное отображение объекта по горизонтали |
|
flipV |
Зеркальное отображение объекта по вертикали |
|
glow |
Создание эффекта свечения внешних границ объекта |
|
gray |
Отображение объекта в серых тонах |
|
invert |
Инвертирование цветовой гаммы объекта |
|
light |
Создание эффекта освещения объекта |
|
mask |
Создание прозрачной маски из непрозрачных пикселей объекта |
|
redirect |
Преобразование объекта в элемент DAlmage (технология Microsoft DirectAnimation) |
|
revealTrans |
Эффект появления/исчезновения объекта |
|
shadow |
Создание силуэта объекта вдоль его границы |
|
wave |
Эффект искривления объекта по вертикали |
|
хrау |
Изменение глубины цвета объекта (эффект рентгеновского снимка) |
Рассмотрим на примерах возможные варианты действия некоторых фильтров.
Фильтр WAVE
Фильтр wave создает синусоидальное искривление объекта в вертикальном направлении и имеет свойства add, enabled, freq, lightStrength, phase и strength, имеющие следующее назначение:
strength – задает интенсивность действия фильтра со значением от 0 до 255
add – определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию (add=1 – добавить; add=0 – не добавлять)
freq – задает количество максимумов в волне искривления объекта;
lightstrength – добавляет эффект трехмерности гребням волны искажения объекта;
phase – определяет фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0).
На рис. 53 представлен результат работы фильтра с параметрами, прописанными в следующем коде:
{IMG SRC="dog.jpg" WIDTH="200" }
{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: wave(strength=10, add=0, lightstrength=20, freq=5)"}
{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: wave(strength=5, add=0, phase=50, lightstrength=20, freq=20)"}
Рис.53 Использование визуального фильтра WAVE
Фильтр ALPHA
Данный фильтр использует такие свойства, как opacity, style и finishOpacity. Свойство opacity позволяет определить степень прозрачности объекта в интервале от 0 (полная прозрачность) до 100 (полная непрозрачность). Свойство style может принимать значения от 0 до 3.
При style=0 весь объект становится равномерно прозрачным в соответствии со значением свойства opacity
При style=2, степень прозрачности изменяется от центра объекта к границе вписанного в объект круга (от значения opacity до значения finishOpacity).
Если свойство styie=3, то прозрачность меняется от центра объекта к его границам.
На рис. 54 представлены три примера действия фильтра alpha в соответствии с HTML-кодом:
{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: alpha(style=0, opacity=80)"}
{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: alpha(style=3, opacity=100, finishOpacity=20)"}
{IMG SRC="dog.jpg" WIDTH="200" STYLE="filter: alpha(style=2, opacity=100, finishOpacity=0)"}
Рис. 54. Использование визуального фильтра alpha
Фильтр dropShadow
Фильтр dropShadow создает сплошной силуэт объекта, смещенный в заданном направлении, и образует эффект тени.
Фильтр имеет следующие свойства:
color – определение цвета тени;
positive – выбор между тенью от прозрачных или непрозрачных точек объекта (при positive=1 тень будут создавать непрозрачные пиксели, а при positive=0 – прозрачные);
offX и offY – расстояние в пикселях в вертикальной и горизонтальной плоскостях, на которых будет отображаться тень от исходного объекта. Положительные значения offX и offY смещают тень, соответственно, вправо и вниз, отрицательные – влево и вверх.
На рис. 55 показано, как выглядит в браузере прозрачное gif-изображение и то же изображение с применением фильтра dropShadow с различными параметрами в соответствии с кодом:
{IMG SRC="ten.gif" }
{IMG SRC="ten.gif" STYLE="filter: dropShadow(color=#00ff00, positive=1, offX=-20, offY=30 )"}
{IMG SRC="ten.gif" STYLE="filter: dropShadow (color=#00ff00, positive=0, offX=20, offY=30 )"}
Рис. 55. Использование визуального фильтра dropShadow
Задание 3.8
Используя визуальные фильтры, создайте веб-страницу, представленную на рис. 56. При выполнении задания следует учесть следующее:
Заголовок выполнен с помощью фильтра dropShadow на основе изготовленного в PhotoShop прозрачного изображения в формате gif.
Первый ряд изображений получен с помощью фильтра WAVE с использованием различных значений параметров.
Во втором ряду в центре – неискаженное изображение, а справа и слева от него к рисункам применен фильтр alpha.
Рис.56. Образец выполнения задания
Расположенное в центре третьего ряда изображение – результат одновременного применения сразу двух фильтров wave и alpha. Для одновременного применения запись фильтров осуществляется через пробел с указанием параметров для каждого из применяемых фильтров.
К остальным рисункам нижнего ряда применен фильтр blur, размывающий изображение. Использованы свойства:
ü strength, определяющее интенсивность размытия в пикселях,
ü direction, задающее направление размытия в градусах,
ü add, позволяющее демонстрировать размытое изображение на фоне исходного (add=1)