Лабораторная работа №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>.
Статические фильтры
К статическим фильтрам относятся следующие:
alpha – определяет степень видимости объекта. Принимает параметры: opacity, style, finishOpacity, startX, startY, finishX, finishY, enabled;
blur – создает эффект движения объекта. Принимает параметры: add, direction, strength, enabled;
chroma – переводит определенный цвет изображения в прозрачный. Принимает параметры: color, enabled;
dropShadow – отображает силуэт определенного цвета для выбранного объекта, создавая иллюзию, что объект находится над страницей, отбрасывая тень. Принимает параметры: offX , offY, positive, enabled;
fliph – отражает объект относительно центральной вертикальной оси. Принимает параметр enabled;
flipv – отражает объект относительно центральной горизонтальной оси. Принимает параметр enabled;
glow – создает для объекта эффект сияния. Принимай параметры: color, strength, enabled;
gray – отображает объект в градациях серого. Принимает параметр enabled;
invert – обращает цвета объекта. Принимает параметр enabled;
mask – делает из объекта прозрачную маску (отображает прозрачные (transparent) символы определенным цветом, а непрозрачные делает прозрачными). Принимает параметры: color, enabled;
shadow – отрисовывает "боковые" грани объекта, создавая впечатление объемности. Принимает параметры: color, direction, enabled;
wave – создает волнистое искажение объекта вдоль вертикальной оси. Принимает параметры: add, strength, freq, phase, ligthStrength, enabled;
xray – изменяет глубину цвета объекта и отрисовывает черно-белым, делая его похожим на рентгеновский снимок. Принимает параметр enabled.
Пример из листинга 1 иллюстрирует применение некоторых из перечисленных выше фильтров с параметрами, принятыми по умолчанию.
Каждый фильтр имеет параметр enabled, принимающий значения true (разрешено применение) и false (запрещено применение). Значением по умолчанию является true.
Фильтры blur, glow и wave имеют параметр strength, определяющий интенсивность (силу), применения фильтра в диапазоне целых чисел от 0 до 255.
Фильтры chroma, dropShadow, glow, mask и shadow имеют параметр color, принимающий в качестве значения имя или код цвета.
Фильтры blur и shadow имеют параметр direction, определяющий направление размытия изображения и падения тени соответственно. Этот параметр принимает значения 0 и кратные 45, означающие количество градусов, отсчитанное от вертикали по часовой стрелке.
Фильтр blur имеет параметр add, принимающий значения true и false. Этот параметр определяет, добавлять (true) или нет (false) исходное изображение к результату применения фильтра.
Чтобы фильтры blur, glow, wave, alpha, dropShadow, shadow, xray воздействовали на тексты, последние должны быть абсолютно позиционированными т.е. иметь параметр position: absolute.
Далее рассматриваются наиболее популярные фильтры.