🔧

Failed to load site

We apologize for the temporary inconvenience. Please try to reload the page.
You can always check the current server status in the Telegram community chat.

Reload page
503
dHTML
-Предыдущий раздел-
-Следующий раздел-

dHTML фильтры

Большинство нижеприведенных
примеров смогут работать
только в IE 4.x и выше.

 

Текст

Графика

 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="trance.jpg">

Что получилось:


Я самая размытая

Фильтр Invert

Синтаксис:
STYLE="filter:Invert"
Пример:

<style>
.gr3{filter:Invert}
</style>
<img class="gr3" src="trance.gif">

Что получилось:


Фильтр Gray

Фильтр Gray делает рисунок черно-белым
Синтаксис:
STYLE="filter:Gray"

Пример:

<style>
.gr4{filter:Gray}
</style>
<img class="gr4" src="trance.gif">


Фильтр Chroma

Фильтр Chroma определенный цвет прозрачным.
Синтаксис: STYLE="filter:Chroma(Color = color)"

Color - цвет(#ff0000)
Пример:

<style>
.gr5{filter:Chroma(Color ="#d1914e")}
</style>
<img class="gr5" src="trance.gif">



Фильтр Xray

Синтаксис:
STYLE="filter:Xray" Пример:

<style>
.gr6{filter:Xray}
</style>
<img class="gr6" src="trance.gif">

Что у нас получилось:


В начало
Сайт создан в системе uCoz