CSS фильтры

Фильтры предоставляют возможность для изменения внешнего вида текста и графики документа, а такжегруппэлементов, заключенных в тэги <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;}