Закажите на сайте VentLand.ru. Зонт вытяжной из нержавеющей стали.
[На предыдущую страницу ],[На главную страницу]

Использование визуальных фильтров в HTML 4.0

Визуальные фильтры, которые появились в HTML 4.0 дают возможность более живо и красочно оформлять страницы. Их использование "тормозит" только то, что браузеры ниже 4 версии их не поддерживают, а также данные фильтры поддерживаются только IE 4.x и браузерами совместимыми с ним. Остается применять их например в intranet или тестировать посетителя на предмет его браузера и ждать лучших времен когда выйдет в свет универсальный браузер и многих избавит от лишних хлопот. Вданном разделе приедены не все визуальные фильтры проддерживающие IE. К тому времени, когда их можно будет широко применять в Web страницах - появятся новые.

Список визуальных фильтров

Фильтр Glow добавляет сияние вокруг объекта.
Фильтр Shadow делает тень объекту.
Фильтр dropShadow делает тень в виде силуэта объекта, смещенный в определенном направлении.
Фильтры FlipH и FlipV переворачивают объект соответственно горизонтально и вертикально.
Фильтр Mask выделяет объект.
Фильтр Wave делает объект волнистым.
Фильтр Invert реверсирует изображение подобно негативу.
Фильтр Gray делает объект черно-белым.

Основной синтаксис применения фильтров:
STYLE="filter:имя_фильтра(параметр1, параметр2...)"
Для каждого фильтра собственные параметры. Для примеров мы будем использовать стандартные события onMouseOver и onMouseOut на текстовых. При подведении указателя мыши к объекту сработает фильтр, а при удалении восстановятся обычные параметры. А с графическими объектами фильтры демонстрируются посредством кнопок.

Фильтр Glow добавляет сияние вокруг объекта

Синктаксис:
STYLE="filter:Glow(Color=col, Strength=stre)"
col - цвет сияния
stre - интенсивность сияния, 0-100
<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>
Используем фильтр "сияние"
[В начало]

Фильтр Shadow делает тень объекту

Синктаксис:
STYLE="filter:Shadow(Color=col, Direction=direc)"
col - цвет тени
direc - определяет направление тени, 0-315 с шагом 45 градусов (в IE4.0 параметр похоже не работает...)
<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>
Используем фильтр "тень"
[В начало]

Фильтр dropShadow делает тень в виде силуэта объекта, смещенный в определенном направлении

Синктаксис:
STYLE="filter:DropShadow(Color=col, OffX=offx, OffY=offy, Positive=pos)"
col - цвет тени
offx - определяет горизонтальное смещение тени
offy - определяет вертикальное смещение тени pos - целое значение не равное 0 для видимых пикселей, =0 - для невидимых.
<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>
Используем фильтр "DropShadow"
[В начало]

Фильтры FlipH и FlipV переворачивают объект соответственно горизонтально и вертикально.

Честно говоря я не могу придумать им достойного применения.
Синктаксис:
STYLE="filter:FlipH"
STYLE="filter:FlipV"
Я не буду приводить фрагмент их использования, так как все фрагменты подобны см. выше. Приведу только применение в действии. Подведите указатель мыши к соответствующей ссылке:
Используем фильтр "FlipH"
Используем фильтр "FlipV"

[В начало]

Фильтр Mask выделяет объект.

Синктаксис:
STYLE="filter:Mask(Color=col)"
Где col - цвет выделения. (IE 4.0 оставляет черный) Я также не буду приводить фрагмент его использования. Подведите указатель мыши к соответствующей ссылке:
Используем фильтр "Mask"
[В начало]

Фильтр Wave делает объект волнистым.

Синктаксис:
STYLE="filter:Wave(Add=add, Freq=freq, lightStrength=stre1, Phase=phase, Strength=stre2)"
Где:
add - (true, целое значение не равное 0) - добавлен первоначальный объект к фильтрованному, (false, 0) - нет.
freq - целое значение - число волн.
stre1 - сила волны в %
phase - угловое смещение волн в %
stre2 - интенсивность эффекта волны.
Подведите указатель мыши к соответствующей ссылке:
ИСПОЛЬЗУЕМ ФИЛЬТР "WAVE"
[В начало]

Фильтр Invert реверсирует изображение подобно негативу.

Синктаксис:
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'">

Нажатием соответствующей кнопки можно применить или отменить фильтр.

Нажмите соответствующую кнопку

[
В начало]

Фильтр Gray делает объект черно-белым.

Синктаксис:
STYLE="filter:Gray"
Пример применения данного фильтра:

Нажмите соответствующую кнопку



[В начало],[На предыдущую страницу ],[На главную страницу]