Трансформации и эффекты с CSS фильтрами

• alpha
• blur
• chroma
• dropshadow
• flipv
• fliph
• glow
• gray
• invert
• mask
• shadow
• wave
• xray

Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а также групп элементов, заключенных в теги <DIV> и </DIV>. Фильтр задается точно так, как задается любое свойство элемента при помощи стиля.

Синтаксис: {filter: имя(параметры)}

Фильтр alpha

Фильтр alpha задает уровень прозрачности элемента.

Синтаксис: {filter:Alpha(Opacity="20",FinishOpacity="45",Style="3")}

• opacity - уровень прозрачности от 0 до 100
• finish opacity - конечный уровень прозрачности от 0 до 100, параметр ограничивает использование прозрачности до заданного значения.
• style - форма прозрачной области: 0 - универсал, 1 - линия, 2 - круг, 3 - прямоугольник.
• startx - начало прозрачной области применяется только с style=1, задается в процентах.
• starty - начало прозрачной области применяется только с style=1, задается в процентах.
• finishx - конец прозрачной области применяется только с style=1, задается в процентах.
• finishy - конец прозрачной области применяется только с style=1, задается в процентах.

Фильтр blur

Фильтр blur задает элементу эффект размытости при движении.

Синтаксис: {filter:Blur(Add="1",Direction="270",Strength="15")}

• add - либо 0-false, либо 1-true
• direction - задает направление размытия в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
• 0 - Top
• 45 - Top right
• 90 - Right
• 135 - Bottom right
• 180 - Bottom
• 225 - Bottom left
• 270 - Default left
• 315 - Top left
• strength - величина смещения.

Фильтр chroma

Фильтр chroma задает прозрачность для одного цвета.

Синтаксис: {filter:Chroma(Color="#fdfd03")}

• color - ввиде "#rrggbb"

Фильтр dropshadow

Фильтр dropshadow отбрасывает тень от объекта.

Синтаксис: {filter:DropShadow(Color="#6699CC",OffX="3",OffY="3",Positive="1")}

• color - задает цвет тени ввиде "#rrggbb"
• offx - задает смещение тени по оси X
• offy - задает смещение тени по оси Y
• positive - либо 0 - верхний слой виден частично, либо 1 - верхний слой виден весь.

Фильтр flipv

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

Синтаксис: {filter:FlipV;}

Фильтр fliph

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

Синтаксис: {filter:FlipH;}

Фильтр glow

Фильтр glow задает ореол вокруг объекта:

Синтаксис: {filter:Glow(Strength=3, Color="#0000ff")}

Использует параметры:

• color - задает цвет сияния в виде "#rrggbb"
• strength - задает интенсивность сияния от 0 до 100

Фильтр gray

Фильтр gray преобразует объект в черно-белые цвета.

Синтаксис: {filter:Gray;}

Фильтр invert

Фильтр invert инвертирует оттенки, цвета и яркость объекта.

Синтаксис: {filter:Invert;}

Фильтр mask

Фильтр mask задает выделение объекта цветом:

Синтаксис: {filter:Mask(Color="#0000ff")}

Использует параметр:

• color - в виде "#rrggbb"

Фильтр shadow

Фильтр shadow отбрасывает тень от объекта.

Синтаксис: {filter:Shadow(Color="#000000", Direction="150")}

Используется с параметрами:

• direction - задает направление тени в градусах от 0 до 360, при этом поворот на -45 градусов автоматически эквивалентен повороту на 315 градусов.
  • 0 - Top
  • 45 - Top right
  • 90 - Right
  • 135 - Bottom right
  • 180 - Bottom
  • 225 - Default bottom left
  • 270 - Left
  • 315 - Top left
• color - в виде "#rrggbb"

Фильтр wave

Фильтр wave задает волнообразное отображение объекта.

Синтаксис: {filter:Wave(Freq=5, Add=0, LightStrength=1, Phase=2, Strength=2)}

Использует параметры:

• add - либо 0-false, либо 1-true
• freq - задает количество волн
• phase - задает фазу волны
• lightstrength - задает изменение интенсивности освещенности на пиках волн
• strength - задает интенсивность волны

Фильтр xray

Фильтр xray показывает контур объекта, как если бы это был рентгеновский снимок:

Синтаксис: {filter:Xray;}