Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Создание HTML - 2.doc
Скачиваний:
11
Добавлен:
25.03.2016
Размер:
468.99 Кб
Скачать

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="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">