Визуальные фильтры, которые появились в HTML 4.0 дают возможность более живо и красочно оформлять страницы. Их использование "тормозит" только то, что браузеры ниже 4 версии их не поддерживают, а также данные фильтры поддерживаются только IE 4.x и браузерами совместимыми с ним. Остается применять их например в intranet или тестировать посетителя на предмет его браузера и ждать лучших времен когда выйдет в свет универсальный браузер и многих избавит от лишних хлопот. Вданном разделе приедены не все визуальные фильтры проддерживающие IE. К тому времени, когда их можно будет широко применять в Web страницах - появятся новые.
Фильтр Glow добавляет сияние вокруг объекта. Фильтр Shadow делает тень объекту. Фильтр dropShadow делает тень в виде силуэта объекта, смещенный в определенном направлении. Фильтры FlipH и FlipV переворачивают объект соответственно горизонтально и вертикально. Фильтр Mask выделяет объект. Фильтр Wave делает объект волнистым. Фильтр Invert реверсирует изображение подобно негативу. Фильтр Gray делает объект черно-белым.STYLE="filter:Glow(Color=col, Strength=stre)"col - цвет сияния
<HEAD>
<STYLE TYPE="text/css"><!--
.GlowFilter {filter : Glow(Color="#FF0080",Strength="5")}
.NoFilter {filter : #804040}<!-- такое вероятно нигде не описано: filter : #rrggbb - так не задумывалось, но черт возьми - получилось!!! -->
-->
</STYLE>
</HEAD>
<BODY>
<A HREF="" onMouseOver="divGlow.className='GlowFilter'"
onMouseOut="divGlow.className='NoFilter'" </A>
<DIV ID="divGlow" STYLE="width:200;height:14;font:bold 12pt;color:#804040;text-align:center" ALIGN="center">Используем фильтр "сияние"</DIV>
</A> <!-- сам не знаю здесь роль этого закрывающего тэга? Но попробуйте без него и вы все поймете -->
</BODY>
STYLE="filter:Shadow(Color=col, Direction=direc)"col - цвет тени
<HEAD>
<STYLE TYPE="text/css"><!--
.ShadowFilter {filter:Shadow (Color="#400000", Direction="180")}
.NoFilter {filter : #804040}
-->
</STYLE>
</HEAD>
<BODY>
<A HREF="" onMouseOver="divShadow.className='ShadowFilter'"
onMouseOut="divShadow.className='NoFilter'" </A>
<DIV ID="Shadow" STYLE="width:200;height:14;font:bold 12pt;color:#804040;text-align:center" ALIGN="center">Используем фильтр "тень"</DIV>
</A>
</BODY>
STYLE="filter:DropShadow(Color=col, OffX=offx, OffY=offy, Positive=pos)"col - цвет тени
<HEAD>
<STYLE TYPE="text/css"><!--
.DropShadowFilter {filter : DropShadow(Color="#808080",OffX="-3",OffY="-2",Positive="1") }
.NoFilter {filter : #804040}
-->
</STYLE>
</HEAD>
<BODY>
<A HREF="" onMouseOver="divDropShadow.className='DropShadowFilter'"
onMouseOut="divDropShadow.className='NoFilter'" </A>
<DIV ID="DropShadow" STYLE="width:300;height:14;font:bold 12pt;color:#804040;text-align:center" ALIGN="center">Используем фильтр "DropShadow"</DIV>
</A>
</BODY>
STYLE="filter:FlipH"Я не буду приводить фрагмент их использования, так как все фрагменты подобны см. выше. Приведу только применение в действии. Подведите указатель мыши к соответствующей ссылке:
STYLE="filter:FlipV"
STYLE="filter:Mask(Color=col)"Где col - цвет выделения. (IE 4.0 оставляет черный) Я также не буду приводить фрагмент его использования. Подведите указатель мыши к соответствующей ссылке:
STYLE="filter:Wave(Add=add, Freq=freq, lightStrength=stre1, Phase=phase, Strength=stre2)"Где:
STYLE="filter:invert"Пример применения данного фильтра:
<P ALIGN="center">Нажатием соответствующей кнопки можно применить или отменить фильтр.
<IMG ID="imgInvert" src="_picture.gif" width=60 height=60 alt="Нажмите соответствующую кнопку" border="0">
<P ALIGN="center">
<INPUT TYPE="button" VALUE="Применить фильтр" OnClick="imgInvert.className='InvertFilter'">
<INPUT TYPE="button" VALUE="Отменить фильтр" OnClick="imgInvert.className='NoFilter'">
STYLE="filter:Gray"Пример применения данного фильтра: