Dynamic HTML

Главная >> Web дизайн >> Dhtml фильтры (стр.1) >> Dhtml фильтры (стр.2)
Фильтры DHTML

Текст
Графика
 Mask - Выделяет текст
 Shadow - Супер тень
 FlipH - Переворачивает текст
 FlipV - Переворачивает текст
 Glow - Сияющий текст
 Wave - Волнистый текст
 DropShadow - Още один вид тени
  Alpha - Осветляет рисунок
 Blur - Размазывает картинку
 Invert - УХ!
 Gray - Рисунок делает черно-белым
 Chroma - Опред. цвет дел. прозрачн.
 XRay - Светло-черно-белый цвет
 RevealTrans - Рисунок проявляется


Фильтры применяемые с графикой

Возьмем любую картинку

А теперь применим к нему фильтры:
Фильтр 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">
Что у нас получилось:


Фильтр RevealTrans
Пример:

< IMG id="MF" SRC="girl.jpg" STYLE="filter:revealTrans(Duration=5.0, Transition=23);VISIBILITY:hidden">
<input type=button value="Play" OnClick="Start()">
<input type=button value="Stop" OnClick="Stop()">
<SCRIPT>
function Start(){
MF.filters.item(0).Apply();
MF.filters.item(0).Play();
MF.style.visibility="";}
function Stop(){
MF.filters.item(0).Stop();}
</SCRIPT>

Рассмотрим синтаксис:
Duration - время за которое проявится рисунок.
Transition - эффект,от 0 до 23, 23 - наугад.(Самые красивые 12,21,22)
Мы в Transition поставили значение 23,если вы нажмете кнопку "Reload(Обновить)" и еще раз нажмете Start, то эффект будет совчем другой.
Кнопка Stop нужна для того, что бы не жадать вывода рисунка,тоесть если вы нажмете на нее(после того как нажали Start),то рисунок высветится мгновенно.

Вы можете вызывать любой фильтр с помощью кнопки. Для этого вам нужно в теге <DIV> в место class="название_фильтра" писать ID="любое_слово".После </DIV> записать следующую строку:
<INPUT TYPE="button" VALUE="Надпись_на_кнопке" OnClick="любое_слово.className='название_фильтра'">
Пример:
<style>
.pr2{filter:Shadow(Color="#000000", Direction="150")}
</style>
<div id="Slovo" style="width:200;height:30;font:16pt;color:gold;">Я самая теневая</div>
<INPUT TYPE="button" VALUE="Нажми на меня" OnClick="Slovo.className='pr2'">
Что у нас получилось:
Я самая теневая

На предыдущцю страницу [1]
Главная >> Web дизайн >> Dhtml фильтры (стр.1) >> Dhtml фильтры (стр.2)

® design by "Nyb"
Сайт создан в системе uCoz