| Издательский дом ООО "Гейм Лэнд" | СПЕЦВЫПУСК ЖУРНАЛА ХАКЕР #27, ФЕВРАЛЬ 2003 г. |
ЭКСПЛОРЕР ВМЕСТО ФОТОШОПА:
визуальные фильтры в HTML 4.0
Pony (pony@xakep.ru)
Спецвыпуск Xakep, номер #027, стр. 027-054-1
Иногда, заходя на web-страницу какого-нибудь "крутого" web-дизайнера, ужасаешься, как некоторые люди геморроятся, используя подмену картинок или Flash для эффектов, которые можно влегкую замутить, используя визуальные фильтры.
Визуальные фильтры появились в HTML 4.0, чтобы мутить всякие красивые фишки для оформления странички. Основным их недостатком является только то, что бродилки ниже 4 версии их не поддерживают, к тому же по "странному стечению обстоятельств" :) большинство фильтров нормально поддерживаются только IE 4.x и выше. Я расскажу тебе про 13 наиболее интересных на мой взгляд фильтров.
ПОШКОДИМ
Прежде всего давай настучим небольшой код тестовой паги. Основной синтаксис применения фильтров: STYLE="filter:имя_фильтра(параметр1, параметр2...)"
Для каждого фильтра собственные параметры. Для примеров будем юзать стандартные события onMouseOver (мышь въехала) и onMouseOut (мышь отъехала). При подведении указателя мыши к объекту сработает фильтр, а при удалении все вернется взад.
<HEAD>
<STYLE TYPE="text/css">
<!--
.Filter {filter : [Фильтр] }
.NoFilter {filter : #804040}<!-- Это не описано ни в одном справочнике по CSS, но как факт вызов: filter : #rrggbb - работает, что очень сильно облегчает написание динамичных страничек!!! -->
-->
</STYLE>
</HEAD>
<BODY>
<A HREF="onMouseOver='divFilter.className='Filter'" onMouseOut=" divFilter.className='NoFilter'">
<DIV ID="divFilter">
Здесь добавляем объект, над которым будет издеваться наш садо-мазо фильтр :).
</DIV>
</A>
</BODY>
Вот теперь для того чтобы посмотреть, как работает фильтр, тебе достаточно вместо [Фильтр] воткнуть пример, где заюзан конкретный фильтр, и при наведении мышки ты будешь его применять, а при отводе отменять.
ФИЛЬТРЫ В НАТУРЕ
Фильтр Alpha
Фильтр Alpha устанавливает уровень прозрачности.
Синтаксис:
filter:Alpha(Opacity=0-100, FinishOpacity=0-100, Style=0|1|2|3, StartX=pixels, StartY=pixels, FinishX=pixels, FinishY=pixels)
где:
Style (0 - Uniform; 1 - Linear; 2 - Radial; 3 - Rectangular;) - регулирует стиль градиента;
Opacity - начальный уровень прозрачности в процентах;
FinishOpacity - конечный уровень прозрачности в процентах;
StartX - начальная координата по Х для градиента Linear;
StartY - начальная координата по Y для градиента Linear;
FinishX - конечная координата по Х для градиента Linear;
FinishY - конечная координата по Y для градиента Linear;
Пример:
filter:alpha(opacity=20, finishopacity=100, style=1, startx=0, starty=0, finishx=140, finishy=270)
Фильтр Blur
Фильтр Blur смазывает изображение. Имеет множество полезных применений. Например, при помощи него можно размазывать пункты меню.
Синтаксис:
filter:Blur(Add=true|false, Direction=0|45|90|135|180|225|270|315, Strength=pixels)
где:
Add - принимает значение true или false;
Direction - устанавливает направление смазывания (0 - вверх; 45 - вверх и вправо; 90 - вправо; 135 - вниз и вправо; 180 - вниз; 225 - вниз и влево; 270 - влево; 315 - вверх и влево);
Strength - количество пикселей, на которые будет распространяться смазывание.