Визуальные фильтры в IE

Автор статьи: Головин Андрей

интернет Эксплорер версии 4 и выше реализует механизм фильтров, которые определяют способ вывода объекта на экран. Эти фильтры подразделяются на две группы: визуальные эффекты и эффекты перехода. Рассмотрим первую группу.

Применяемые фильтры указываются в описании стилей следующим образом: { filter: имя фильтра(параметр1, параметр2 …) }

Всего доступно 14 визуальных фильтров: <A href=»#alpha»>Alpha</A>, <A href=»#blur»>Blur</A>, <A href=»#chroma»>Chroma</A>, <A href=»#dropshadow»>DropShadow</A>, <A href=»#fliph»>FlipH</A>, <A href=»#flipv»>FlipV</A>, <A href=»#glow»>Glow</A>, <A href=»#gscal»>Gray</A>, <A href=»#invert»>Invert</A>, <A href=»#light»>Light</A>, <A href=»#mask»>Mask</A>, <A href=»#shadow»>Shadow</A>, <A href=»#wave»>Wave</A>, <A href=»#xray»>XRay</A>

<B>Внимание!</B> Для того, чтобы фильтры работали на текстовых блоках необходимо явно задать их ширину, высоту или установить абсолютное позиционирование!
<a name=#alpha></a>
<b>alpha</b>

FILTER: Alpha(Opacity=начальная прозрачность, FinishOpacity=конечная прозрачность, Style=стиль, StartX=начало эффекта по горизонтали, StartY=начало эффекта по вертикали, FinishX=конец эффекта по горизонтали, FinishY=конец эффекта по вертикали)

Устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента.

Параметры фильтра описаны в следующей таблице
>

Параметр Описание Opacity Значение прозрачности. 0 — абсолютно прозрачно, 100 — абсолютно непрозрачно. FinishOpacity Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style. Style 0 — равномерная прозрачность, 1 — линейный градиент, 2 — круговой градиент, 3 — прямоугольный градиент. StartX, StartY Начальные координаты градиента по горизонтали и вертикали. FinishX, FinishY Конечные координаты градиента по горизонтали и вертикали. ALPHA ALPHA Оригинал Фильтр

FILTER: Blur(Add=оригинал, Direction=направление, Strength=величина

Размывает изображение в направлении Direction, заданном в градусах (0 — вверх и далее по часовой стрелке c шагом 45 градусов). Если указано Add=1, то фильтр будет наложен на исходный объект иначе будет отоборажен только результат работы фильтра.

BLUR	BLUR
Оригинал	Фильтр

Для текстовых блоков желательно задавать цвет фона, иначе эффект не буде отображен корректно, точнее так, как хотелось бы.
<a name=#chroma></a>
<b>chroma</b>

Chroma(Color=цвет)

Цвет, заданный в форме #RRGGBB становится прозрачным

Оригинал	Фильтр

FILTER: DropShadow(Color=цвет, OffX=горизонтальное смещение, OffY=вертикальное смещение, Positive=тип тени)

Создает копию объекта, цветом Color, смещенную на указанное расстояние. Если Positive=1, то создается копия непрозрачных пикселей объекта, если — 0, то прозрачных.
&

<a name=#fliph></a><a name=#flipv></a>
<b>FlipH</b> <b>FlipV</b>
filter: FlipH; filter: FlipV
Создает зеркальное отражение объекта относительно горизонтальной (FlipH) или вертикальной (FlipV) оси

FLIP	FLIP
Оригинал	Фильтр

<A name=#invert> </a>
<b>invert</b>

filter: Invert инвертирует пиксели объекта.

INVERT	INVERT
Оригинал	Фильтр

filter: Light

Добавляет источник свет, действующий на объект. В виду комплексности этого фильтра, я опишу его немного позже, о чем обязательно сообщу.

<A name=#mask> </a>
<b>mask</b>

filter: Mask(Color=<I>цвет</I> Прозрачные пиксели объекта выводятся цветом Color, а непрозрачные — становятся прозрачными.

<b>shadow</b>

filter: Shadow(Color=<I>цвет</I>, Direction=<I>направление</I>) Создает силует от одной из сторон объекта цветом Color в направлении Direction (задается как и в фильтре <A href=»#blur»>Blur</A>).

<A name=#wave> </a>
<b>wave</b>

filter: Wave(Add=<I>оригинал</I>, Freq=<I>частота</I>, LightStrength=<I>величина</I>, Phase=<I>начальная фаза</I>, Strength=<I>величина</I>) Производит «синусоидальное» искажение объекта вдоль вертикальной оси. Freq — количество пиков, LightStrength — величина подсветки, Phase — начальная фаза, по умолчанию — 0, изменяется от 0 до 100, таким образом 25 соответствует 90<SUP>о</SUP>, Strength — величина смещения.

WAVE	WAVE
Оригинал	Фильтр

filter: Xray Изменяет глубину цвета и отображает объект в черно-белом варианте. По идее должно напоминать рентгеновский снимок

Оригинал	Фильтр

Фильтры можно комбинировать. Для этого, просто, перечисляем их подряд. Например: filter: Blur(Add=1, Direction=90, Strength=25) Invert FlipV

Оригинал	Фильтр