Честно говоря, я очень редко вижу в сети предмет использования фильтров. Так же и информацию о них в различных учебниках практически невозможно увидеть.
Постоянно вижу сайты нагроможденные графикой. Причем во многих случаях она совершенно не нужна. Видимо дело в том, что многие веб-мастера не знают или не хотят знать о существовании простых способов сделать красиво без картинок. К тому же нужно учесть и тех посетителей, которые отключают в браузерах показ графики.
Запомните этот урок. Ведь именно от Вас зависит будущее интернета:-)
Что это?
Я бы назвал их не фильтрами а скорее эффектами. Ведь они позволяют наиболее широко изменить внешний вид объекта и это очень похоже на эффекты в графических редакторах. Задаются фильтры атрибутом filter. Один недостаток (для меня существенный): Opera (по крайней мере версии 6) совершенно игнорирует все фильтры. Но Вы можете не волноваться, таких как я (пользователей Оперы) совсем не много. Explorer'ом пользуется более 90% пользователей интернета.
Shadow
Этот вариант фильтра позволяет создать иллюзию тени от объекта. Допустим, мы хотим украсить текст красной тенью:
<font style=filter:shadow(color=red,direction=135);height:15;width:100;font:200%>красивый текст</font>красивый текст
Стоит отметить, что все фильтры работают только при наличии атрибутов размера height и width.
В скобках указаны параметры фильтра. Параметр color, как не трудно догадаться задает цвет тени. А direction - ее направление в градусах или словом. При нулевом значении этого параметра тень направлена вверх. Возможные значения параметра приведены в таблице:
Слово | Градусы | Пример |
top | 0 | пример |
top right | 45 | пример |
right | 90 | пример |
bottom right | 135 | пример |
bottom | 180 | пример |
bottom left (по умолчанию) | 225 (или -135) | пример |
left | 270 (или -90) | пример |
top left | 315 (или -45) | пример |
DropShadow
Это другая разновидность тени. Она имитирует падение тени на задний фон. Описание стиля имеет такой вид:
<p style=filter:dropshadow(color=#007ca5,offx=3,offy=2,positive=1);width:200;height:20;font:200%>Текст с тенью
Текст с тенью
color - цвет тени;
offx - расстояние тени от текста по оси Х;
offx - соотв. по оси Y
positive - если 1 (по умолчанию), то тень нормальная. Если 0, то непозитивная(негативная).
Пример негативной тени:
Текст с негативной тенью
Glow
Довольно интересный фильтр для создания ореола. Имеет вид:
<a href=8.shtml style=filter:glow(Strength=3,Color=red);height:15;width:100>Фильтр GlowФильтр Glow
Wave
Английское слово Wave обозначает "волна". Т.е. этот фильтр накладывает "волны" на объект. Думаю, физикам понравится этот фильтр, ведь в нем можно задать и частоту и амплитуду и даже фазу волны. Посмотрим пример:
<h3 style=color:#0E4A50;filter:wave(freq=5,phase=2,strength=2,lightstrength=5,add=0);width:60;height=20>Волна</h3>
Разберем параметры этого фильтра:
Mask
Это очень простой фильтр, который имитирует выделение текста, так, если бы его кто-то выделил мышью:
<b>Такое впечатление, что</b> <b style=filter:mask(color:#000080);width:130;height:10>текст выделенный</b>Взглянем на результат:
Только что я рассказал о фильтрах наиболее применимых к текстам. (Правда, некоторые можно только к текстам и применить.) В следующем уроке мы поговорим о фильтрах, которые наиболее подходят для графических объектов.
Предыдущий урок | Следующий урок