Справочник по CSS

Некоторые фильтры могут быть без параметров.

Фильтры деляться на статические и динамические. Статические фильтры меняют вид объекта, а сам он остается неподвижным. Динамические фильтры позволяют менять объект с задаваемой скоростью переключения кадров.

Далее будут мною описаны 18 статических и 19 динамических фильтра.

Фильтры применяют через параметр STYLE:

Возьмём картинку (img.gif) и применим к ней фильтр прозрачности:

- имеем ту же картинку, но полупрозрачную.

Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.

JavaScript:

...

Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.

VBScript:

...

Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.

Статические фильтры

Alpha

Задает уровень прозрачности элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

AlphaImageLoaded

Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.

При настройке этого фильтра можно использовать следующие параметры:

BasicImage

Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.

Отдельно можно задавать угол поворота, стерень "просвеченности".

При настройке этого фильтра можно использовать следующие параметры:

Blur

Делает элемент страницы размытым.

При настройке этого фильтра можно использовать следующие параметры:

Chroma

Делает прозрачным отдельный цвет элемента.

При настройке этого фильтра можно использовать следующие параметры:

Compositor

Объеденяет два цвета элемента страницы и выводит что получилось.

При настройке этого фильтра можно использовать следующие параметры:

DropShadow

Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.

При настройке этого фильтра можно использовать следующие параметры:

Emboss

Делает элемент страницы выпуклым.

При настройке этого фильтра можно использовать следующие параметры:

Engrave

Делает элемент страницы вдавленным.

При настройке этого фильтра можно использовать следующие параметры:

Glow

Создает эффект "тления" элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Gradient

Эффект градиентной закраски элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Light

Создет эффект освещенности элемента страницы.

Методы, применяемые к этому фильтру:

MaskFilter

Отображает прозрачный цвет элемента страницы заданным цветом.

При настройке этого фильтра можно использовать следующие параметры:

Matrix

Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.

При настройке этого фильтра можно использовать следующие параметры:

"bilinear" (по умолчанию)

MotiobBlur

Создает эффект быстрого движения (размытости).

При настройке этого фильтра можно использовать следующие параметры:

Pixelate

Отображает элемент страницы отдельными пикселами.

При настройке этого фильтра можно использовать следующие параметры:

Shadow

Создает эффект отбрасывания тени у элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Wave

Создает волнистое искажение элемента страницы.

При настройке этого фильтра можно использовать следующие параметры:

Динамические фильтры

Barn()

Создает эффект "открывающейся и закрывающейся двери".

Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.

Атрибуты

Свойства

Задает или возвращает признак разрешения применения фильтра.

Задает или возвращает направление движения: от центра к границам или наоборот.

Задает или возвращает направление преобразования: по вертикали или по горизонтали.

Задает процент выполнения преобразования.

Возвращает состояние выполнения преобразования.

Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.

Пример 1:

Toggle Transition

Пример 2:

This is DIV #1

This is DIV #2

Toggle Transition