Каскадные таблицы стилей. Фильтры.

Лабораторная работа №2

Интересные визуальные эффекты, связанные с графикой и текстом, можно получить с помощью фильтров каскадных таблиц стилей. Например, постепенное появление (исчезновение) рисунка, плавное преобразование одного изображения в другое, задание степени прозрачности и т.п.

Обычно визуальные эффекты создаются с помощью графических редакторов (Adobe Photoshop, Macromedia Flash и др.). Вместе с тем во многих случаях при создании небольших анимаций (например, баннеров) и других не слишком сложных визуальных эффектов можно вполне обойтись средствами таблиц стилей и сценариев, достигая своих целей при существенно меньших затратах ресурсов (объем файлов, время на разработку). При разработке более сложных проектов фильтры можно комбинировать с другими средствами.

Фильтр – некий инструмент преобразования изображения, взятого из графического файла и вставленного в HTML-документ. Кроме того, некоторые фильтры можно применять и к текстам. Следует иметь в виду, что фильтры работают только в Internet Explorer, начиная с версии 4. Это, конечно, ограничивает их использование при создании публикаций, инвариантных относительно браузеров. Однако следует иметь в виду, что количество пользователей Microsoft Internet Explorer и аналогичных по своим возможностям браузеров составляет большинство. Кроме того, Web-технологии используются не только в Интернете, но и в локальных сетях.

Существуют два вида фильтров: статические и динамические. Все они определяются в каскадной таблице стилей одинаково:

filter: имя_фильтра (параметр 1, параметр2, ...)

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

Фильтры применяются не ко всем HTML-элементам, а только к тем из них которые определяют прямоугольный блок и не являются окнами. Ниже приводится список тегов, к содержимому которых можно применять фильтры:

<body>;

<button>;

<div> – если заданы параметры размеров width и height или элемент абсолютно позиционирован;

<img>;

<input>;

<marquee>;

<span> – если заданы параметры размеров width и height или элемент абсолютно позиционирован;

<table>;

<textarea>;

<td>;

<th>;

<textarea>.