Создание переходов цвета.
Для создания переходов цвета можно использовать фильтр alpha. На листинге 14 и рис.12 показано применение данного фильтра к изображению.
Листинг 14.
<html><head><body>
<div style="position:absolute;top:10;
left:10;filter:alpha(style=1,opacity=100,
finishopacity=0)">
<img src="2.jpg"> </div> </body></html>
Рис.12.
В строках
<div style="position:absolute;top:10;
left:10;filter:alpha(style=1,opacity=100,
finishopacity=0)">
<img src="2.jpg"> </div>
мы применяем данный фильтр. Свойство style определяет вариант стиля. При этом 0 соответствует однородной непрозрачности, значение 1 – линейный градиент, 2 – радиальный градиент, 3 – угловой градиент.
Свойства opacity и finishopacity (оба выраженные в процентах) определяют начальное и конечное значение непрозрачности, в которых будет изменяться переход.
Эффект светящегося текста.
Фильтр glow выполняет наложение цветовой ауры вокруг вашего текста. Цвет и интенсивность в этом эффекте могут регулироваться. На листинге 15 и рис.13 показано применение данного фильтра. Параметр strength определяет глубину свечения.
Листинг 15.
<html><head><body>
<div style="position:absolute;top:10;
left:10;filter:glow(color=red, strength=5)">
<h2>Пример светящегося текста</h2>
</div> </body></html>
Рис.13.
Применение фильтра wave.
Данный фильтр (на следующем листинге и рисунке) накладывает синусоидальные искажения на текст или изображение на страницах.
Листинг 16.
<html><head><body>
<div style="position:absolute;top:10;
left:10; padding:1;
filter:wave(add=0, freq=2,
phase=10,strength=3)">
<font size="+3" face="Arial Black" color=blue>
Вечерний факультет НГЛУ</font>
</div> </body></html>
Рис.
14.
Фильтр wave, как видно из строки
filter: wave ( add=0 , freq = 1 ,phase = 1, strength=10)">
имеет несколько свойств. Если значение свойство add равно 1, то добавляется копия текста или изображения под результат наложения фильтра wave. Если значение свойство add равно 0, то копия не добавляется. Свойство freq определяет частоту фильтра, т.е. сколько полных волн будет налагаться на область применения данного фильтра. Увеличение значения этого свойства придает более сильный волновой эффект. Свойство phase задает сдвиг фазы волны. Увеличение значения этого свойства не изменяет свойств волны, а просто сдвигает ее в пространстве. Последнее свойство, strength, определяет амплитуду применяемой синусоиды.
Фильтр blur.
Этот фильтр создает иллюзию движения, размывая текст или изображение в заданном направлении. Этот фильтр может применяться в одном из восьми направлений. У фильтра 3 свойства. Если первое свойство add принимает значение true, то поверх размытого изображения добавляется копия исходного изображения. Второе свойство определяет направление, а третье свойство strength определяет величину эффекта размытия. На листинге 17 и рис.15 приведен пример с использованием данного фильтра.
Листинг 17.
<html><head><body>
<div style="position:absolute;top:100;
left:100; padding:30;
filter:blur(add=true, direction=45,strength=10)">
<font size="+3" face="Arial Black" color=blue>
Наложение маски на изображение</font>
</div> </body></html>
Рис.15.