Использование фильтров в HTML позволяет добиться разнообразных визуальных эффектов. Фильтры позволяют преобразовывать все теги, у которых атрибут style обладает свойством filter, например, <body>, <button>, <DIV>, <img>, <input>, <MARQDEE>, <SPAK>, <TABLE>, <TD>, <TEXTAREA>, <TFOOT>, <TH>, <THEAD>, <TR>.
где filtername – имя фильтра, a fparameter – его параметры.
Перечислим основные фильтры.
Фильтр
Описание
Alpha
Устанавливает уровень прозрачности элемента. Синтаксис:
Alpha (Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)
§ opacity и finishopacity – целые числа от 1 до 100, определяющие начальный и конечный уровень прозрачности элемента по направлению градиента. 100 соответствует абсолютной непрозрачности;
§ style – градиент непрозрачности. Допустимые значения: 0 (равномерный), 1 (линейный), 2 (радиальный), 3 (прямоугольный);
§ startx, startY, finishX, finishY– координаты подобласти элемента, где задается его прозрачность.
Например:
<IMG src="box.gif" style="filter: Alpha(Opacity=10, FinishOpacity=100, Style=2")
Результат:
Blur
Размытый образ, создающий эффект движения с большой скоростью. Синтаксис:
Blur (Add=add, Direction=direction, Strength=strength)
• add – целое число, которое определяет, надо ли выводить первоначальное изображение. Если число отлично от нуля, то изображение будет видно, а если 0, то не видно;
• direction – направление движения. Целое число от 0, 45, 90, ..., 315;
• strength – расстояние в пикселях размытия образа при движении. Например:
<DIV
style="font: 40pt bold; color: red; position: absolute; top: 0; filter:Blur(Add=l, Direction=45, Strength=10)">
МЭИ (ТУ)
</DIV>
Результат:
Chroma
Делает указанный цвет прозрачным.
Синтаксис:
Chroma(Color=color)
где color – цвет, который будет прозрачным.
Например, следующий код делает белый цвет рисунка прозрачным.
<IMG id="imgDot" src="dot.bmp" style="position: absolute, width: 77px; height: 77px; filter: Chroma(Color=white)>
DropShadow
Создает тень в виде офсетного образа изображения.
Синтаксис:
DropShadow(Color=color, OffX=offX, OffY=offY, Positive=posltive)
§ color – цвет тени;
§ offx, offY – координаты смещения тени относительно первоначального изображения;
§ positive – если значение равно 1, то тень создается для любого непрозрачного пикселя, если значение равно 0, то только для прозрачных пикселей первоначального изображения.
Например:
<SPAN style="font: 80pt bold; color: navy; position: absolute; top: 80px; filter:DropShadow(Color=red, OffX=5, QffY=10, Positive=l)">
МЭИ (ТУ)
</SPAN>
Результат:
Переводит изображение в черно-белый формат.
Синтаксис:
Gray
Например,
<IMG src=" dot.gif" style="filter: Gray">
Invert
Обращает компоненты и интенсивность цвета. Синтаксис:
Invert
Wave
Создает волнообразное искажение образа вдоль оси абсцисс. Синтаксис:
Wave(Add=add, Freq=freq, LightStxengtft=strength, Phase=phase, Strength=strength)
§ add – если значение равно 1, то первоначальное изображение отображается, а если 0, то не отображается;
§ freg – целое число, задающее количество волн;
§ phase – целое число от 0 до 100, задающее начальную фазу волны;
§ Lightstrength и Strength– целые числа, задающие интенсивность волны.
Например:
<SPAN style="font: 80pt bold; color: navy;
position: absolute; top: 80px;
fliter:Wave(Add=0, Freq=5, LightStrength=100,
Phase=10, Strength=10)">
МЭИ (ТУ)
</SPAN>
Xray
Создает черно-белый рентгеновский образ элемента.
Синтаксис: Xray
Примечание: Свойство filter позволяет задать одновременно несколько фильтров. Например, предложенный ниже код выводит оригинальное изображение и зеркальный его образ сначала по горизонтали, а потом по вертикали.
