База данных для веб-мастеров: Библиотека - Программы: Веб браузеры: Визуальные фильтры в IE

Визуальные фильтры в IE

Интернет Эксплорер версии 4 и выше реализует механизм фильтров, которые определяют способ вывода объекта на экран. Эти фильтры подразделяются на две группы: визуальные эффекты и эффекты перехода. Рассмотрим первую группу.

Применяемые фильтры указываются в описании стилей следующим образом: { filter: имя фильтра(параметр1, параметр2 ...) }

Всего доступно 14 визуальных фильтров: Alpha, Blur, Chroma, DropShadow, FlipH, FlipV, Glow, Gray, Invert, Light, Mask, Shadow, Wave, XRay

ВНИМАНИЕ!!! Для того, чтобы фильтры работали на текстовых блоках необходимо явно задать их ширину, высоту или установить абсолютное позиционирование!

alpha

FILTER: Alpha(Opacity=начальная прозрачность, FinishOpacity=конечная прозрачность, Style=стиль, StartX=начало эффекта по горизонтали, StartY=начало эффекта по вертикали, FinishX=конец эффекта по горизонтали, FinishY=конец эффекта по вертикали)

Устанавливает степень прозрачности объекта. Прозрачность может быть установлена, как равномерная для всего объекта, так и в виде градиента.

Параметры фильтра описаны в следующей таблице

Параметр

Описание

Opacity

Значение прозрачности. 0 - абсолютно прозрачно, 100 - абсолютно непрозрачно.

FinishOpacity

Необязательный параметр, который определяет конечное значение прозрачности, если фильтр применяется как градиентный см. Style.

Style

0 - равномерная прозрачность, 1 - линейный градиент, 2 - круговой градиент, 3 - прямоугольный градиент.

StartX, StartY

Начальные координаты градиента по горизонтали и вертикали.

FinishX, FinishY

Конечные координаты градиента по горизонтали и вертикали.


ALPHA	ALPHA
Оригинал	Фильтр

blur

FILTER: Blur(Add=оригинал, Direction=направление, Strength=величина

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


BLUR	BLUR
Оригинал	Фильтр

Для текстовых блоков желательно задавать цвет фона, иначе эффект не буде отображен корректно, точнее так, как хотелось бы.

chroma

Chroma(Color=цвет)

Цвет, заданный в форме #RRGGBB становится прозрачным


Оригинал	Фильтр

DropShadow

FILTER: DropShadow(Color=цвет, OffX=горизонтальное смещение, OffY=вертикальное смещение, Positive=тип тени)

Создает копию объекта, цветом Color, смещенную на указанное расстояние. Если Positive=1, то создается копия непрозрачных пикселей объекта, если - 0, то прозрачных.

SHADOW	SHADOW
Оригинал	Фильтр

FlipH, FlipV

filter: FlipH; filter: FlipV

Создает зеркальное отражение объекта относительно горизонтальной (FlipH) или вертикальной (FlipV) оси.


FLIP	FLIP
Оригинал	Фильтр

Glow

filter: Glow(Color=цвет, Strength=величина)

Создает контур цветом Color вокруг границ объекта

GLOW	GLOW
Оригинал	Фильтр

Gray

filter: Gray

Выводит объект в градациях серого, удаляя всю информацию о цветах


GRAY	GRAY
Оригинал	Фильтр

invert

filter: Invert

Инвертирует пиксели объекта.


INVERT	INVERT
Оригинал	Фильтр

light

filter: Light

Добавляет источник свет, действующий на объект. В виду комплексности этого фильтра, я опишу его немного позже, о чем обязательно сообщу.


Оригинал	Фильтр

mask

filter: Mask(Color=цвет

Прозрачные пиксели объекта выводятся цветом Color, а непрозрачные - становятся прозрачными.

MASK	MASK
Оригинал	Фильтр

shadow

filter: Shadow(Color=цвет, Direction=направление)

Создает силует от одной из сторон объекта цветом Color в направлении Direction (задается как и в фильтре Blur).

SHADOW	SHADOW
Оригинал	Фильтр

shadow

filter: Wave(Add=оригинал, Freq=частота, LightStrength=величина, Phase=начальная фаза, Strength=величина)

Производит "синусоидальное" искажение объекта вдоль вертикальной оси. Freq - количество пиков, LightStrength - величина подсветки, Phase - начальная фаза, по умолчанию - 0, изменяется от 0 до 100, таким образом 25 соответствует 90^о, Strength - величина смещения.


WAVE	WAVE
Оригинал	Фильтр

xray

filter: Xray

Изменяет глубину цвета и отображает объект в черно-белом варианте. По идее должно напоминать рентгеновский снимок


Оригинал	Фильтр

Фильтры можно комбинировать. Для этого, просто, перечисляем их подряд. Например: filter: Blur(Add=1, Direction=90, Strength=25) Invert FlipV


Оригинал	Фильтр

Материал с сайта http://exper.ural.ru