Урок 8: Фильтры I

Главная|Учебник HTML|Учебник CSS|Новости|Вопрос/ответ|Советы|Ссылки|Downloadы|Анкета

Честно говоря, я очень редко вижу в сети предмет использования фильтров. Так же и информацию о них в различных учебниках практически невозможно увидеть.

Постоянно вижу сайты нагроможденные графикой. Причем во многих случаях она совершенно не нужна. Видимо дело в том, что многие веб-мастера не знают или не хотят знать о существовании простых способов сделать красиво без картинок. К тому же нужно учесть и тех посетителей, которые отключают в браузерах показ графики.

Запомните этот урок. Ведь именно от Вас зависит будущее интернета:-)

Что это?
Я бы назвал их не фильтрами а скорее эффектами. Ведь они позволяют наиболее широко изменить внешний вид объекта и это очень похоже на эффекты в графических редакторах. Задаются фильтры атрибутом 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 - ее направление в градусах или словом. При нулевом значении этого параметра тень направлена вверх. Возможные значения параметра приведены в таблице:
СловоГрадусыПример
top0пример
top right45пример
right90пример
bottom right135пример
bottom180пример
bottom left (по умолчанию)225 (или -135)пример
left270 (или -90)пример
top left315 (или -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
Параметр Color в объяснении не нуждается, а Strength задает силу ореола (степень размытия) от 0 до 100. Очень красиво выглядит если цвет текста белый.

Wave
Английское слово Wave обозначает "волна". Т.е. этот фильтр накладывает "волны" на объект. Думаю, физикам понравится этот фильтр, ведь в нем можно задать и частоту и амплитуду и даже фазу волны. Посмотрим пример:

<h3 style=color:#0E4A50;filter:wave(freq=5,phase=2,strength=2,lightstrength=5,add=0);width:60;height=20>Волна</h3>

Волна

Разберем параметры этого фильтра:

Если бы мы в нашем примере написали add=1, то это привело бы к:

Волна

Видите, из-под нормального текста торчит волнистый. Можно побаловаться с параметром strength:

Волна

Mask
Это очень простой фильтр, который имитирует выделение текста, так, если бы его кто-то выделил мышью:

<b>Такое впечатление, что</b> <b style=filter:mask(color:#000080);width:130;height:10>текст выделенный</b>
Взглянем на результат:
Такое впечатление, что текст выделенный

Только что я рассказал о фильтрах наиболее применимых к текстам. (Правда, некоторые можно только к текстам и применить.) В следующем уроке мы поговорим о фильтрах, которые наиболее подходят для графических объектов.

Предыдущий урок | Следующий урок