Главная » Фильтры в дизайне веб-страниц
Очень часто на форуме и в электронных письмах пользователи 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 - конечные координаты градиента по вертикали.Пример:ПримерКод
style=filter:alpha(Opacity=50)Фильтр Blur Размывает изображение в направлении Direction, заданном в градусах. Если указано Add=1, то фильтр будет наложен на исходный образец, иначе будет отображен только результат работы фильтра. Синтаксис: Blur(Add=?, Direction=?, Strength=?) Параметры:
Add - объект. 0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец;
Direction - направление размытия объекта в градусах (0 - вверх и далее по часовой стрелке c шагом 45 градусов);
Strength - степень размытия. Пример:ПримерКод
style=filter:blur(Add=0, Direction=1, Strength=15)Фильтр ChromaФильтр Chroma делает цвет, заданный в форме #RRGGBB прозрачным. Синтаксис: Chroma(Color=?) Параметры:
Color - цвет, который будет прозрачным. Пример:ПримерКод
style=filter:chroma(color=#FFFFF3)>Фильтр DropShadow Фильтр DropShadow рисует сплошной силуэт объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень. Синтаксис: DropShadow(Color=?, OffX=?, OffY=?, Positive=?) Параметры:
Параметры
Color - цвет тени;
OffX - смещение тени относительно текста по оси X;
OffY - смещение тени относительно текста по оси Y;
positive - Характер освещения (0 или 1). Пример:ПримерКодПример фильтра shadow

Пример фильтра shadow
Пример фильтра shadow

Пример фильтра shadow
Фильтр FlipH Фильтр FlipH переворачивает объект горизонтально. Синтаксис: FlipH Пример:ПримерКод

style=filter:flipHФильтр FlipVФильтр FlipH переворачивает объект вертикально.Синтаксис: FlipV Пример:ПримерКод
style=filter:flipVФильтр Glow Фильтр GLOW добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта. Синтаксис: Glow(Color=?, Strength=?)Параметры:
Stregth - cила свечения в диапазоне 0-100;
Color - цвет свечения.Пример:ПримерКодПример фильтра glow

>Пример фильтра glow
Фильтр GrayФильтр Gray удаляет цветовую гамму объекта и отображает его в серых тонах. Синтаксис: Gray Пример:ПримерКод

style=filter:grayФильтр InvertФильтр Invert меняет оттенок, насыщение и яркость объекта на противоположные. Синтаксис: Invert Пример:ПримерКод
style=filter:invertФильтр MaskФильтр Mask отображает текст так, как будто он выделен мышью. Синтаксис: Mask(Color=?)Параметры:
Color - цвет, окружающий текст.Пример:ПримерКодПример фильтра mask

> Пример фильтра mask
Фильтр ShadowФильтр Shadow создает эффект тени.Синтаксис: Shadow(Color=?, Direction=?)Параметры:
Color - цвет тени;
Direction - направление тени в градусах.Пример:ПримерКодПример фильтра shadow

> Пример фильтра shadow
Фильтр WaveФильтр Wave производит "синусоидальное" искажение объекта вдоль вертикальной оси. Синтаксис: Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?) Параметры:
Add - Булево значение, определяющее использование оригинала (0 или 1). По умолчанию 0;
Freq - количество волн;
LightStrength - величина подсветки;
Phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100;
Strength - величина смещения. Пример:ПримерКод

style=filter:wave(add=0, freq=10, lightstrength=1, phase=1, strength=5)>Фильтр Xray Фильтр XRay отображает объект в черно-белом варианте, как на рентгеновском снимке. Синтаксис: xray Пример:ПримерКод
STYLE=filter:xray> Категория: Веб-дизайн | Просмотров: 192 нужны ли фильтры грубой очистки воды