Техника Web-дизайна для студента
Статические фильтры
Рассмотрим статические фильтры:
О Shadow (со1ог=значение, direct1оп=значение, strength= значение) — применяется для создания тени. Параметром coior устанавливается цвет тени, direction — угол поворота тени в градусах, strength — глубина тени в пикселях;
О DropShadow (со1ог=значение, of 1~х=значение, offy= значение, positive=3Ha4eHne) — применяется для создания отброшенной тени. Назначение параметра coior аналогично описанному выше, параметры offx и offy предназначены для задания смещения тени в пикселях по горизонтали и вертикали соответственно. Отсчет по оси X — вправо, по оси Y — вниз. Параметр positive может принимать два значения: true (по умолчанию) — обычная тень, faise — тень в виде маски, закрашенной заданным цветом и прозрачными буквами;
О Glow (со1ог=значение, strength=3Ha4eHne) — создает эффект свечения вокруг объекта. Параметр coior аналогичен предыдущим случаям, параметр strength позволяет задать ширину свечения в пикселях.
Так выглядит текст документа, в котором используются перечисленные выше фильтры (листинг 9.1).
Листинг 9.1. Текст документа, в котором к фрагментам текста применены фильтры Shadow, DropShadow и Glow
<html>
<head>
<title><t4-UIbTpbI</title>
</head>
<body>
<div style="font-size: 48; position: absolute; top: 10; left: 5; filter: progid:DXImageTransform. Microsoft. Shadow(color=green,
Direction=60, strength=7)">
Фильтр Shadow - тень </div>
<div style="font-size: 48; position: absolute; top: 70; left:5;
Filter:
Progid:DXImageTransform. Microsoft. DropShadow(color=blue, offx=5,offy=5)">
Фильтр DropShadow - отброшенная тень </div>
<div style="font-size: 48; position: absolute; top: 190; left:5;
Filter:
Progid:DXImageTransform. Microsoft. DropShadow(color=blue, offx=5,offy=5, positive=false)">
Фильтр DropShadow - отброшенная тень
</div>
<div style="font-size: 48; position: absolute; top: 310; left: 5;
Filter: progid:DXImageTransform. Microsoft. Glow(color=red, strength=5)">
Фильтр Glow - свечение
</div>
</body>
</html>
Для задания каждого фильтра используется метка-контейнер <div>. В параметре style, кроме задания соответствующего фильтра, заданы размеры шрифта, абсолютное позиционирование текстового блока и параметры позиционирования. Напомним, что абсолютное позиционирование является одним из условий применения фильтра к содержимому контейнера <div>. Результаты действия трех перечисленных фильтров показаны на рис. 9.1.
О MaskFilter (со1ог=значение) — создает маску прямоугольной формы, закрашенную цветом, заданным в параметре color, а пиксели текста становятся прозрачными. Пример задания фильтра в документе:
<div style="position: absolute; top:10; left:2; filter:
progid:DXImageTransform. Microsoft. MaskFiIter(color=red) ">
Фильтр MaskFilter - маска </div>
'Л Фильтры - Microsoft Internet Explorer
Файл Правка Вид Избранное Сервис Справка
Фильтр Shadow - тень
|
|
|
|
Фильтр DropShadow отброшенная тень
Фильтр Glow - свечение
|
Мои компьютер |
Рис. 9.1. Результаты применения к фрагментам текста фильтров Shadow, DropShadow и Glow
О Blur (PixelRadius=3Ha4eHne, MakeShadow=3Ha4eHne) — создает эффект плоского размытия объекта. Применяется как к тексту, так и к рисункам. Параметр PixeiRadius задает ширину области размытия в пикселях, параметр MakeShadow может принимать значения: true — объект отображается как тень и false — обычное отображение (действует по умолчанию). Пример задания фильтра применительно к тексту:
<div style="position: absolute; top:60; left:2; filter: progid:DXImageTransform. Microsoft. Blur(PixelRadius=3,
Ма ке Shadow=t rue)">
Фильтр Blur - плоское размытие </div>
О MotionBlur (direction=3Ha4eHne, strength=3Ha4eHne,
Add=3Ha4enne) — создает эффект объемного размытия текста или рисунков. Параметр direction задает направление размытия в градусах, параметр strength — ширину размытия в пикселях. Параметр add может принимать значения true ИЛИ false. В первом случае исходное изображение будет добавлено к размытому изображению, во втором случае воспроизводится только размытое изображение. Пример задания фильтра:
<div style="position: absolute; top: 160; left: 2; filter:
Progid:DXImageTransform. Microsoft. MotionBlur(direction= 60, strength=7, add=true)">
Фильтр MotionBlur - объемное размытие
</div>
На рис. 9.2. показаны результаты действия фильтров Mask - Filter, Blur и MotionBlur. Для фильтра Blur задан параметр маkeshadow=true, для фильтра MotionBlur показаны два варианта применения фильтра к тексту: первый — параметр Add=true, второй — Add=false.
О Wave (Strength=3Ha4eHne, Ргед=значение, Р11азе=значение, Add=3Ha46Hne) — создает волновые искажения текста или рисунков. Параметр strength позволяет задать ширину искажения в пикселях, параметр Freq — количество пиков, Phase — сдвиг вдоль направления распространения волны в процентах от длины волны. Назначение параметра Add такое же, как в предыдущем случае. Пример применения фильтра к тексту:
<div style="font-size: 60; position: absolute; top: 11; left: 71;
Filter:
Progid:DXImageTransform. Microsoft. wave(add=true, strength=8, freq=15, phase=30)">
Фильтр wave - волновые искажения
</div>
|
Рис. 9.2. Результаты применения фильтров MaskFilter, Blur (параметр MakeShadow = true), MotionBlur (параметр Add = true), MotionBlur (параметр Add = false) |
□ Gradient (startColorStr=3Ha4eHne, endColorStr= значение, GradientType=3Ha4eHne) — создает градиентную фоновую заливку отдельного блока или всей страницы. Параметры startcoiorstr и endcoiorstr предназначены для задания начального и конечного цвета градиентной заливки. Параметр GradientType может принимать два значения: 1 — заливка по горизонтали, 0 — заливка по вертикали (по умолчанию). Пример применения фильтра ко всей странице:
<body style="filter:
Progid:DXImageTransform. Microsoft. Gradient (startCol-
OrStr=yellow, endColorStr=green, GradientType= 0)">
Пример применения фильтра к текстовому блоку:
<div style="font-size: 36; position: absolute; top:
100; left: 10; filter:
Progid:DXImageTransform. Microsoft. Gradient(startColorSt r=magenta, endColorStr=cyan, GradientType=l); width:500; height:85">
Фильтр Gradient, примененный к текстовому блоку </div>
□ Emboss — создает эффект выпуклости объекта. Применяется как к тексту, так и к рисункам. В случае применения к тексту требуется задание фоновой заливки текстового блока. Однако независимо от заданного цвета фона эффект будет создаваться с использованием оттенков серого цвета. Результат будет наиболее контрастным, если задать белый цвет фона. Пример:
<div style="font-size: 36; position: absolute; top:195; left: 10; background-color: white; width=500;
Height=85;
FiIter:progid:DXImageTransform. Microsoft. Emboss" > Фильтр Emboss - создание выпуклости </div>
□ Engrave — создает эффект вдавленности объекта. Применяется аналогично фильтру Emboss. Пример:
<div style="font-size: 36; position: absolute; top:290; left: 10; background-color: white; width=500;
Height=85; filter:
Progid:DXImageTransform. Microsoft. Engrave">
Фильтр Engrave - создание вдавленности </div>
Результаты действия фильтров Wave, Gradient, Emboss И Engrave показаны на рис. 9.3. Ко всей странице применена вертикальная градиентная фоновая заливка, а к одному из блоков — горизонтальная градиентная заливка.
О Alpha (орас^у=значение, style=3Ha4eHne) — создает эффект прозрачности изображения. Параметр opacity позволяет задать степень непрозрачности изображения в процентах от 0 (полная прозрачность) до 100 (полная непрозрачность) — действует по умолчанию. С помощью параметра style задается способ применения фильтра. Параметр может принимать следующие значения: 0 — равномерно по всему изображению, 1 — вдоль отрезка прямой, 2 — от центра эллипса, вписанного в границы изображения до краев изображения, 3 — от центра изображения до его краев. При выборе значения "1" необходимо задать значения еще четырех параметров: startx, startY, finishx и finishY — координаты начала и конца линии относительно левого верхнего угла рисунка, вдоль которой изменяется прозрачность. Пример применения фильтра Alpha к рисунку:
<img style="position: absolute; left: 47; top: 29; filter: progid:DXImageTransform. Microsoft. Alpha (opacity =100, style=l, startx=0, startY=0, finishX=150, fin - ishY=225)" src="8.jpg" width="150" height="225">
|
Рис. 9.3. Результаты применения фильтров Wave, Gradient, Emboss и Engrave |
Результаты действия фильтра Alpha при использовании различных параметров показаны на рис. 9.4 и 9.5.
|
Рис. 9.4. Результаты применения фильтра Alpha к рисунку при неизменном параметре opacity и изменении параметра style |
|
Рис. 9.5. Результаты применения фильтра Alpha к рисунку при неизменном параметре style и изменении параметра opacity |
□ Basiclmage (Rotation=3Ha4eHne, Мл. ггог=значение, Gray - зса1е=значение, ХЕау=значение, 1тгеЛ=значение,
0pacity=3Ha4eHne) — может использоваться для создания различных эффектов, которые задаются значениями параметров:
• Rotation — поворот объекта по часовой стрелке. Может принимать 4 значения: 0 — нет поворота (по умолчанию),
1 — поворот на 90°, 2 — на 180°, 3 — на 270°;
• Mirror — зеркальное отображение объекта по горизонтали. Возможные значения: 0 — нет отображения (по умолчанию), 1 — есть зеркальное отображение;
• Grayscale — преобразование цветного изображения в черно-белое. Может принимать значения: 0 — не применять этот эффект (по умолчанию), 1 — применить эффект;
• XRay — преобразование цветного объекта в черно-белое и одновременно в негативное. Принимает значения: 0 — не производить преобразование (по умолчанию), 1 — преобразовать;
• invert — объект, оставаясь цветным, становится негативным. Может принимать значения: 0 — эффект не применяется (по умолчанию), 1 — применить эффект;
• Opacity — позволяет задать степень непрозрачности объекта. Может иметь дробные значения от 0.00 (полная прозрачность) до 1.00 (полная непрозрачность по умолчанию).
Допускается применение к одному объекту нескольких эффектов, но если какие-то эффекты не используются, то соответствующие параметры можно не писать.
Пример применения фильтра Basiclmage в листинге 9.2.
Листинг 9.2. Применение фильтра Basiclmage к текстовому блоку и рисунку
<HTML>
<HEAD>
<Т1ТЪЕ>Фильтр Basiclmage</TITLE>
</HEAD>
<BODY bgColor=#QQffff>
<DIV style="font-size=16; filter:
Progid:DXImageTransform. Microsoft. Basiclmage ( Rotation=3); position: absolute; top: 20; left: 5; width=15Q" XBXp align=justify>3flecb располагается текстовый блок, развернутый на 270 градусов с помощью фильтра BasicImage</Bx/DIV>
<IMG style= "position: absolute; left: llOpx; top: 5" src="l. jpg">
<IMG style="filter:
Progid:DXImageTransform. Microsoft. Basiclmage (Mirror=l); position: absolute; left: 230; top: 5" src="l. jpg">
</BODY>
</HTML>
Документ содержит блок с текстом и два одинаковых рисунка. Фильтр применен к блоку, который развернут на 270° (Rotation=3) и второму рисунку, который отображен зеркально (Mirror=l).
Результат действия фильтра показан на рис. 9.6.
|
Рис. 9.6. Результат применения фильтра Вазісітаде к текстовому блоку (ВоІа1:іоп=35 и второму рисунку (Міггог=1) |
О chroma (со1ог=значение) — делает прозрачным цвет изображения, заданный параметром color. Фильтр chroma может сделать прозрачным один цвет, но при многократном применении фильтра к одному и тому же объекту можно сделать прозрачными несколько цветов. Не рекомендуется применять фильтр к рисункам в формате JPEG, так как результат фильтрации в этом случае трудно назвать удовлетворительным. Пример применения фильтра к рисунку приведен в листинге 9.3.
Листинг 9.3. Применение фильтра Chroma к рисунку
<html>
<head>
<t i 11е>Филь тр Chroma</1 i 11e>
</head>
<body bgcolor="#00FFFF">
<img src="chroma. gif"><br>
<img
Style="filter:progid:DXImageTransform. Microsoft. Chroma(color= yellow) " src="chroma. gif"xbr>
<img
Style="filter:progid:DXImageTransform. Microsoft. Chroma(color= yellow) progid:DXImageTransform. Microsoft. Chroma(color=blue)" s rc="chroma. g i f">
</body>
</html>
Рисунок содержит фоновую заливку желтого цвета, буквы синего цвета, красный контур вокруг букв повторен три раза. В первом случае к нему не применяется фильтр, во втором случае фильтр делает прозрачным желтый цвет, а в третьем — он применен дважды, делая прозрачным как желтый, так и синий цвет. Результат показан на рис. 9.7.
О AlphalmageLoader (згс=значение, sizingmethod= значение) — размещает изображение, заданное параметром src, между фоном и содержимым объекта, на которое распространяется действие фильтра. Параметр sizingmethod может принимать три значения: crop — вставляемое изображение обрезается по границе объекта, image — объект обрезается по границе изображения, scale — изображение масштабируется до границ объекта.
|
Рис. 9.7. Результаты применения фильтра Chroma к верхнему рисунку: однократного (color=yellow) и двукратного (color=yellow и color=blue) |
Рассмотрим два примера применения фильтра с различными значениями параметра sizingmethod. В обоих случаях фильтр применяется к блоку, включающему текст желтого цвета на зеленом фоне. Размеры блока 300 х 150 пикселей. В параметре src фильтра указано имя файла рисунка с размерами 200 х 215 пикселей:
<div style="font-size=16; color=yellow; width: 300;
Height: 150; background-color: green; padding: 5; filter: progid:DXImageTransform. Microsoft. AlphaImageLoader (src=rl. jpg, sizingmethod=crop)">
<p align="justify"xb>3TOT блок включает... </b>
</div>
Второй пример полностью аналогичен первому. Различие между ними состоит в значении параметра sizingmethod. В первом случае параметр sizingmethod имеет значение crop, и так как размеры рисунка по высоте больше размеров блока, рисунок обрезается по вертикали. Во втором — параметру sizingmethod задано значение image, поэтому рисунок воспроизводится полностью, а блок обрезается по горизонтали.
В обоих случаях рисунок располагается между содержимым блока (в данном случае текстом) и фоном (рис. 9.8).
|
Рис. 9.8. Применение фильтра AlphalmageLoader к текстовому блоку с параметром sizingmethod = Crop (верхний рисунок) и с параметром sizingmethod = Image |
О Pixelate (тахздиаге=значение) — объединяет соседние пикселы изображения в квадратные ячейки с однородной заливкой, создавая эффект мозаики. Размер квадратных ячеек в пикселях задается параметром тахэдиаге. Результаты фильтрации изображения показаны на рис. 9.9.
|
Исходное изображение maxsquare=3 maxsquare=5 Рис. 9.9. Результаты применения фильтра Pixelate с различными значениями параметра maxsquare |
□ Light — создает эффект одного или нескольких источников света. Управление фильтром осуществляется программой на JavaScript. В программе можно использовать несколько методов, НО важнейшим ИЗ НИХ является AddCone (), имеющий 10 параметров. Первый и второй параметры — координаты источника по осям X и Y в пикселях относительно левого верхнего угла объекта; третий — номер слоя; четвертый и пятый — координаты точки, в которую направлен источник; шестой, седьмой и восьмой — составляющие цвета в формате RGB; девятый — интенсивность источника (до 100); десятый — половина угла распространения света. В случае использования нескольких источников, каждый из них следует помещать в отдельном слое.
В качестве примера использования фильтра Light рассмотрим следующий документ (листинг 9.4).
Листинг 9.4. Пример создания эффектов одного и двух источников света с помощью фильтра Light применительно к двум одинаковым изображениям
<html>
<head>
CtitlextouibTp Light</title>
</head>
<body bgcolor="#OOFFFF">
<img id=il style="filter:
Progid:DXImageTransform. Microsoft. light" src="l. jpg"xp> <img id=i2 style="filter:
Progid:DXImageTransform. Microsoft. light" src="l. jpg">
|
Рис. 9.10. Результаты создания эффектов одного и двух источников света фильтром Light |
<script>
11. filters[0].addCone(-5,-3,1,500,350,255,255,255,7,20)
12. filters[0].addCone(15,0,1,350,250,255,255,255,7,20) i2.filters[0].addCone(280,0,2,-50,300,255,255,255,7,20) </script>
</body>
</html>
Фильтр применен к двум изображениям, в качестве которых используется один и тот же рисунок, размеры которого 30 х 202 пикселя. Размеры рисунка приводятся не случайно. Все координаты источников света должны выбираться с учетом размеров рисунка. Точка расположения источника и точка, в которую он направлен, могут располагаться и за пределами рисунка.
Второе изображение с индивидуальным именем i2 содержит два источника света, первый из которых располагается в слое 1, а второй — в слое 2. Программа на языке JavaScript, управляющая работой фильтра, должна обязательно располагаться после меток <img> с описаниями фильтров с тем, чтобы к началу работы программы эти метки уже были загружены.
Может возникнуть желание непременно расположить программу в более привычном месте, а именно в блоке <HEAD>. Тогда ее нужно оформить в виде функции и вызывать на выполнение с помощью параметра обработки события onLoad, поместив его в метку <body>. На рис. 9.10 показаны эффекты создания одного и двух источников света.
