Фильтры в дизайне веб-страниц

Очень часто на форуме и в электронных письмах пользователи Mаcromedia Dreamweaver спрашивают как пользоваться фильтрами в этом редакторе. Компания-производитель данной программы не удосужилась написать в хелпах о эффектах, которые добавляют эти фильтры, и о синтаксисе. В этой статье я хочу рассказать о результатах, которые можно увидеть после добавления их на страницу, также - как они добавляются в Mаcromedia Dreamweaver MX 2004.

В статье я буду использовать этот рисунок, для представления результатов действия разных фильтров.

В Mаcromedia Dreamweaver MX 2004 фильтры добавляются в окне установок свойств стиля CSS (Window > CSS Styles Shift+F11), закладка Extensions, раздел Visual effect > Filter. В списке выбираете нужный фильтр и указываете параметры, которое вам нужны. Код фильтра заносится в файл, в котором описаны свойства CSS страницы или в заголовок страницы, в зависимости от установок.

Фильтры не применяются к элементам HTML: апплеты, Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т.д.

Применить фильтр к элементу просто: достаточно задать значение его свойства filter, следуя правилам задания свойств каскадных таблиц стилей filter: значение. Каждый фильтр, как отмечалось выше, реализует определённый алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задаётся в форме функции:

filter: имя_фильтра([параметры]);

К сожалению, фильтры видны только в браузере MS Internet Explorer. Opera, Netscape & Mozilla пока их не видят, но элемент отображают нормально, хотя и без фильтра.

Фильтр Alpha

Фильтр Alpha устанавливает прозрачность объекта. Прозрачность может быть уставлена - равномерная или градиентная. Этот фильтр прекрасно смотрится в выпадающих меню.

Синтаксис: Alpha(Opacity=?, FinishOpacity=?, Style=?, StartX=?, StartY=?, FinishX=?, FinishY=?)

Параметры:
Opacity - значение прозрачности. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно;
FinishOpacity - необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный;
Style - 0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент; StartX - начальные координаты градиента по горизонтали;
StartY - начальные координаты градиента по вертикали;
FinishX - конечные координаты градиента по горизонтали; FinishY - конечные координаты градиента по вертикали.

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:alpha(Opacity=50)>

Фильтр Blur

Размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра.

Синтаксис: Blur(Add=?, Direction=?, Strength=?)

Параметры:
Add - объект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец;
Direction - направление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов);
Strength - степень размытия.

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:blur(Add=0, Direction=1, Strength=15)>

Фильтр Chroma

Фильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным.

Синтаксис: Chroma(Color=?)

Параметры:
Color - цвет, который будет прозрачным.

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:chroma(color=#FFFFF3)>

Фильтр DropShadow

Фильтр DropShadow рисует сплошной силуэт объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень.

Синтаксис: DropShadow(Color=?, OffX=?, OffY=?, Positive=?)

Параметры:
Параметры
Color - цвет тени;
OffX - смещение тени относительно текста по оси X;
OffY - смещение тени относительно текста по оси Y;
positive - Характер освещения (0 или 1).

Пример:

Пример	Код
Пример фильтра shadow	<TABLE> <TR> <th style=filter:dropshadow(color=red, offx=4,offy=4,positive=0)><b>Пример фильтра shadow</b> </TABLE>
Пример фильтра shadow	<TABLE> <TR> <th style=filter:dropshadow(color=red, offx=4,offy=4,positive=1)><b>Пример фильтра shadow</b> </TABLE>

Фильтр FlipH

Фильтр FlipH переворачивает объект горизонтально.

Синтаксис: FlipH

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:flipH>

Фильтр FlipV

Фильтр FlipH переворачивает объект вертикально.

Синтаксис: FlipV

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:flipV>

Фильтр Glow

Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта.

Синтаксис: Glow(Color=?, Strength=?)

Параметры:
Stregth - cила свечения в диапазоне 0-100;
Color - цвет свечения.

Пример:

Фильтр Gray

Фильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах.

Синтаксис: Gray

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:gray>

Фильтр Invert

Фильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные.

Синтаксис: Invert

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:invert>

Фильтр Mask

Фильтр Mask отображает текст так, как будто он выделен мышью.

Синтаксис: Mask(Color=?)

Параметры:
Color - цвет, окружающий текст.

Пример:

Фильтр Shadow

Фильтр Shadow создает эффект тени.

Синтаксис: Shadow(Color=?, Direction=?)

Параметры:
Color - цвет тени;
Direction - направление тени в градусах.

Пример:

Фильтр Wave

Фильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси.

Синтаксис: Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Параметры:
Add - Булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0;
Freq - количество волн;
LightStrength - величина подсветки;
Phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100;
Strength - величина смещения.

Пример:

Пример	Код
	<img src="../pix/fl.jpg" style=filter:wave(add=0, freq=10, lightstrength=1, phase=1, strength=5)>

Фильтр Xray

Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке.

Синтаксис: xray

Пример:

Пример	Код
	<img src="../pix/fl.jpg" STYLE=filter:xray>

Источник: dreamweaver.net.ru

Реклама