<button id=b1><b>Щёлкни здесь</b> </button> <p>
<button id=b2> <h1>Новости</h1> </button> </html>
Контрольные вопросы и задания
1.Что такое CSS? Каково их назначение?
2.Как можно связать таблицу стиля с документом?
3.Что такое операторы комментария и как они вставляются в документ?
4.Какую таблицу стилей можно создать для ссылок в HTML-документе? Приведите пример.
5.Таблицы стилей работают только с текстом или нет? Если нет, приведите примеры их использования.
6.Разработайте 5 небольших HTML-страничек, в каждой из которых Вами должна быть создана своя таблица стиля.
14. Фильтры
Интересные визуальные эффекты, связанные с графикой и текстом получить с помощью фильтров каскадных таблиц стилей. Например, постепенное появление (исчезновение) рисунка, плавное преобразование одного изображения в другое, задание степени прозрачности и т. п.
Обычно визуальные эффекты создаются с помощью графических редакторов (Adobe Photoshop, Macromedia Flash и др.). Вместе с тем во многих случаях при создании небольших анимаций (например, баннеров) и других не слишком сложных визуальных эффектов можно вполне обойтись средствами таблиц стилей и сценариев, достигая своих целей при существенно меньших затратах ресурсов (объём файлов, время на разработку). При разработке более сложных проектов фильтры можно комбинировать с другими средствами.
Фильтр следует понимать как некий инструмент преобразование изображения, взятого из графического файла и вставленного в HTML-документ. Кроме того, некоторые фильтры можно применять и к текстам. Но следует иметь в виду, что фильтры работают только в Internet Explorer, начиная с версии 4. Web-технологии используются не только в Интернете, но и в локальных сетях.
Существуют два вида фильтров – статические и динамические. Все они определяются в каскадной таблице стилей одинаково:
77
filter: имя_фильтра (параметр1, параметр2, ...)
Статические фильтры сначала преобразуют изображение или элемент с текстом, а затем результат преобразования отображается в браузере. То есть пользователь видит только конечный результат преобразования. Динамические фильтры выполняют преобразование в течение некоторого времени, которое можно указать в качестве параметра. При этом создаётся анимационный эффект: преобразование происходит постепенно с отображением всех его промежуточных этапов. В отличие от статических фильтровров, применение динамических фильтров обязательно связано с использованием несложных сценариев. В свою очередь, сценарии можно применять для изменения свойств как статических, так и динамических фильтров, создавая различные анимационные эффекты.
Фильтры применяются не ко всем HTML-элементам, а только к тем из них, которые определяют прямоугольный блок и не являются окнами. Ниже приводится список тегов, к содержимому которых можно применять фильтры:
<body>;
<button>;
<div> — если заданы параметры размеров width и height или элемент абсолютно позиционирован;
<img>;
<input>;
<marquee>;
<span> — если заданы параметры размеров width и height или элемент абсолютно позиционирован;
<table>;
<textarea>;
<td>;
<th>.
Статические фильтры
К статическим фильтрам относятся следующие:
alpha — определяет степень видимости объекта. Принимает
параметры: opacity, style, finishOpacity, startX, startY, finishX, finishY, enabled;
blur— создаёт эффект движения объекта. Принимает параметры: add, direction, strength, enabled;
chroma — переводит определённый цвет изображения в прозрачный. Принимает параметры: color, enabled;
78
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.
Ниже приведены лишь некоторые из фильтров.
Пример из листинга 11 иллюстрирует применение некоторых из перечисленных выше фильтров с параметрами, принятыми по умолчанию (рисунок 23).
Листинг 11 Применение фильтров с параметрами, принятыми по умолчанию: <html>
<head><title>Фильтры </title> <img src="Котёнок.jpg">
<p> без фильтра
<p> <img style=filter:flipv src="Котёнок.jpg">
<p> фильтр <font face="Arial" color="#FF00FF">flipv </font>
отображает объект относительно центральной горизонтальной оси
<p><img style=filter:fliph src="Котёнок.jpg">
<p>фильтр <font face="Arial" color="#FF00FF"> fliph </font>
79
отображает объект относительно центральной вертикальной оси
<p><img style=filter:wave src="Котёнок.jpg">
<p>фильтр <font face="Arial" color="#FF00FF">wave </font>
создаёт волнистое искажение объекта вдоль вертикальной оси
</html>
Рисунок 23 – Применение статических фильтров
Каждый фильтр имеет параметр enabled, принимающий значения true (разрешено применение) и false (запрещено применение). Значением по
80
умолчанию является 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.
Динамические фильтры
Динамические фильтры позволяют организовать постепенное появление или исчезновение изображения, трансформацию одного графического объекта в другой, а также имитирование освещения. Для их применения необходимо использовать сценарии.
Трансформация
Суть трансформации графического объекта заключается в том, что сначала необходимо зафиксировать первое изображение, затем выполнить замену этого изображения другим и (или) изменить параметры того же самого изображения, а после этого выполнить собственно трансформацию. Все эти действия выполняются в сценарии. Фиксация и трансформация изображения производятся с помощью специальных методов (функций) фильтра – apply () и play () соответственно. Для остановки процесса преобразования предназначен метод stop (). Для трансформации объектов служат два фильтра – revealtrans и biendtrans. По существу, второй из них является частным случаем первого.
Фильтр revealtrans используется для трансформации изображения — постепенного появления или перехода от одного изображения к другому. Кроме параметра enabled (которым обладают все фильтры), он имеет следующие параметры:
duration — длительность преобразования в секундах (число с плавающей точкой);
81
transition — тип преобразования (целое число от 0 до 23):
0 – Box In (стягивающийся прямоугольник);
1 – Box Out (расширяющийся прямоугольник);
2 – Circle In (стягивающийся круг);
3 – Circle Out (расширяющийся круг);
4 – Wipe Up (стирание вверх);
5 – Wipe Down (стирание вниз);
6 – Wipe Right (стирание вправо);
7 – Wipe Left (стирание влево);
8 – Vertical Blinds (вертикальные жалюзи);
9 – Horisontal Blinds (горизонтальные жалюзи);
10 – Checkerboard Across (сужающиеся клетки шахматной доски);
11 – Checkerboard Down (закрывающаяся шахматная доска);
12 – Random Dissolve (случайный наплыв);
13 – Split Vertical In (вертикальное деление внутрь);
14 – Split Vertical Out (вертикальное деление наружу);
15 – Split Horisontal In (горизонтальное деление внутрь);
16 – Split Horisontal Out (горизонтальное деление наружу);
17 – Strips Left Down (стирание влево вниз);
18 – Strips Left Up (стирание влево вверх);
19 – Strips Right Down (стирание вправо вниз);
20 – Strips Right Up (стирание вправо вверх);
21 – Random Bars Horisontal (случайные горизонтальные полосы);
22 – Random Bars Vertical (случайные вертикальные полосы);
23 – Random selection of (0 – 22) (случайный выбор из предыдущих вариантов).
Сначала рассмотрим применение фильтра revealtrans для создания эффекта появления изображения. В листинге 12 приведён пример, в котором изображение постепенно появляется (рисунок 24).
Листинг 12 Постепенное появление изображения:
<html>
<head>
<title>Фильтр revealtrans</title> </head>
<img id=myimg src="Котёнок2.jpg" style="visibility=hidden;
82
filter:revealtrans(duration=2, transition =19)"> <script>
// появление изображения
myimg.filters("revealtrans").apply( ) /* фиксируем исходное состояние изображения */
myimg.style.visibility="visible" /* делаем изображение видимым */ myimg.filters("revealtrans").play( ) /* выполняем преобразование */
</script>
<html>
Рисунок 24 – Применение динамических фильтров
83