|
Фильтры
Обзор
Комментарий
и примеры применения
ОБЗОР:
dHTML фильтры
Текст Графика
Mask - Выделяет текст
Shadow - Супер тень
FlipH - Переворачивает текст
FlipV - Переворачивает текст
Glow - Сияющий текст
Wave - Волнистый текст
DropShadow - Още один вид тени
Alpha - Осветляет рисунок
Blur - Размазывает картинку
Invert - УХ!
Gray - Рисунок делает черно-белым
Chroma - Опред. цвет дел. прозрачн.
XRay - Светло-черно-белый цвет
RevealTrans - Рисунок проявляется
Фильтры применяемые к тексту
Фильтр Mask
Фильтр Mask выделяет объект,как будто бы вы выделили его мышью.
Синтаксис:
STYLE="filter:Mask(Color=color)" color - цвет выделения(#ff0000)
Пример:
<style type="text/css">
.MaskFilter{filter:Mask(Color=ff0000)}
</style>
<div class="MaskFilter" STYLE="width:360;height:30;font:bold
16pt;> Среди всех я самая выделенная</div>
Среди всех я самая выделенная
Фильтр Shadow
Фильтр Shadow делает объекту тень
Синтаксис:
filter:Shadow(Color=color, Direction=direction) color - цвет тени.
Direction - (от 0 до 315)направление тени.
<style>
.pr2{filter:Shadow(Color="#000000", Direction="150")}
</style>
<div class="pr2" style="width:200;height:30;font:16pt;color:red;">Я
самая теневая</div>
Я самая теневая
Фильтр FlipH
Фильтр FlipH переворачивает объект горизонтально.
Синтаксис:
STYLE="filter:FlipH"
Пример:
<style type="text/css">
.pr3{filter:FlipH;}
</style>
<div class="pr3" style="width:200;height:30;font:16pt;color:red;">Я
самая перевернутая</div>
Я самая перевернутая
Фильтр FlipV
Фильтр FlipV переворачивает объект вертикально.
Фильтр Glow
С помощью фильтра Glow ваш обект засияет.
Синтаксис:
STYLE="filter:Glow(Strength=strength, Color=color;)" color -
цвет которым засияет текст.
strength - сила с которой он засияет(0-100)
Пример: <style type="text/css"> .pr4{filter:Glow(Strength=3,
Color="#ff0000")} </style> <div class="pr4"
style="width:200;height:20;font:bold 16pt;color:gold"> Я
самая сияющая Я самая сияющая
Фильтр Wave
Фильтр Wave делает объект волнистым.
Синтаксис: filter: Wave( Freq=freq, Add=add, LightStrength=strength, Phase=phase,
Strength=strength) Freq -
число волн
Add - незнаю :(
LightStrength - сила волны
Phase - угол волны
Strength - интенсивность волны
Пример:
<style>
.pr5{filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}
</style>
<div class="pr5" style="width:400;height:30;font:26pt;color:red;">Я
самая волнистая</div>
Вот что получилось:
Я самая волнистая
Фильтр Dropshadow
Фильтр DropShadow делает тень к тексту.
Синтаксис:
STYLE="filter:DropShadow(Color=color, OffX=Offx, OffY=Offx, Positive=positive)"
Color - Цвет тени(#ff0000)
OffX - Смещение тени по X
OffY - Смещение тени по Y
Positive - Значение или 0, или 1.
Пример:
Я самая оттенистая
Фильтры применяемые с графикой
Возьмем любую картинку
А теперь применим к нему фильтры:
Фильтр Alpha
Фильтр Alpha осветляет объект.
Синтаксис: STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,
Style=style, StartX=X,
StartY=Y, FinishX=X, FinishY=Y)"
Opacity - степень осветления(0-100. 0 светло, 100 темно).
FinishOpacity - конечная степень осветления(0-100. 0 светло, 100 темно).
Style - Число 0(???), 1(линия) 2(круг) 3(прямоугольник)
Пример:
<style>
.gr{filter:Alpha(Opacity="90",FinishOpacity="45",Style="3")}
</style>
<img class="gr1" src="a2.gif">
Что у нас получилось:
Фильтр Blur
Фильтр Blur размывает рисунок в определенную сторону. Синтаксис:
STYLE="filter:Blur(Add = add, Direction = direction, Strength =
strength)" Add - Или 0, или 1.
Direction - От 0 до 315 - в какую сторону произойдет размытие.
Strength - Смещение
Пример:
<style>
<.gr2{filter:Blur(Add="1",Direction="310",Strength="10")}
</style>
<img class="gr2" src="a2.gif">
Что получилось:
Я самая размытая
Фильтр Invert
Синтаксис:
STYLE="filter:Invert"
Пример:
<style>
.gr3{filter:Invert}
</style>
<img class="gr3" src="a2.gif">
Что получилось:
Фильтр Gray
Фильтр Gray делает рисунок черно-белым
Синтаксис:
STYLE="filter:Gray"
Пример:
<style>
.gr4{filter:Gray}
</style>
<img class="gr4" src="a2.gif">
Фильтр Chroma
Фильтр Chroma определенный цвет прозрачным.
Синтаксис: STYLE="filter:Chroma(Color = color)"
Color - цвет(#ff0000)
Пример:
<style>
.gr5{filter:Chroma(Color ="#d1914e")}
</style>
<img class="gr5" src="a2.gif">
Фильтр Xray
Синтаксис:
STYLE="filter:Xray"
Пример:
<style>
.gr6{filter:Xray}
</style>
<img class="gr6" src="a2.gif">
|
