Пример. Фильтр – это некоторый алгоритм, преобразующий визуальное отображение элемента в окне броузера

Фильтры и переходы.

Фильтр – это некоторый алгоритм, преобразующий визуальное отображение элемента в окне броузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент и после этого он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр называется переходом.

Элементы, к которым применяются фильтры:

BODY – всегда;

BUTTON – всегда;

DIV – если заданы свойства width и height или элемент абсолютно позиционирован;

IMG – всегда;

INPUT – всегда;

MAQUEE – всегда;

SPAN - если заданы свойства width и height или элемент абсолютно позиционирован;

TABLE – всегда;

TEXTAREA – всегда.

Для того чтобы применить фильтр необходимо по правилам задания свойств каскадных таблиц стилей указать

filter: значение ([имя параметра=значение параметра])

Если присутствуют несколько параметров, то они указываются через запятую. Некоторым фильтрам параметры не нужны, но скобки указываются обязательно.

К элементу можно применить несколько фильтров одновременно – они задаются в виде списка с пробелом в качестве разделителя.

· Статические фильтры.

ALPHA – позволяет создавать эффекты прозрачности отображения или его части.

Свойства:

Opacity – определяет степень прозрачности. 0 – полная невидимость, 100 – нормально отображение.

Style – определяет способ создания эффекта прозрачности. Допустимые значения:

0 – изменение прозрачности всего изображения;

1 – параметры startX, startY, finishX, finishY определяют координаты точек прямой, на которой прозрачность равна значению параметра FinishOpacity;

2 – степень прозрачности точек меняется при перемещении из центра к эллипсу (вписанному в прямоугольный блок отображения элемента) от значения, определенного свойством Opacity до значения, определенного свойством FinishOpacity.

3 – прозрачность аналогичным образом меняется от центра до границ изображения.

Пример.

<img src="phantom.jpg" style="filter:alpha (opacity=100, style=0, startX=0,startY=0, finishX=0, finishY=200, finishOpacity=0)">

<img src="phantom.jpg" style="filter:alpha(opacity=100, style=1, finishOpacity=15)">

<img src="phantom.jpg" style="filter:alpha(opacity=100, style=2, finishOpacity=15)">

<img src="phantom.jpg" style="filter:alpha(opacity=100, style=3, finishOpacity=15)">

BLUR – создает эффект размытого изображения.

Свойства:

Strength – определяет интенсивность применения фильтра. Степень размытости изменяется от 0 до 255.

Direction – определяет направление, в котором размывается изображение объекта.

Add – булево свойство. Определяет, включать (true) или не включать (false) исходное отображение в отфильтрованный образ.