Фильтры

Важно отметить, что фильтры могут быть добавлены только к элементам HTML, которые рассматриваются как управляющие. Это любые элементы создающие прямоугольное место на WEB-странице. Вот некоторые из управляющих элементов: BODY,
DIV,
MARQUEE,
TD,
IMG,
SPAN,
TR .

filter alpha

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

filter: alpha(opacity, finishopacity, style,startX, startY, finishX, finishY)

Может иметь значение:

 opacity- начальный уровень прозрачности.
 finishopacity - конечный уровень прозрачности.
 style - стиль градиента
   0-равномерная прозрачность,
   1-линейный,
   2-радиальный,
   3-прямоугольный ).
 startX - начальные координаты градиента по горизонтали.
 startY - начальные координаты градиента по вертикали.
 finishX - конечные координаты градиента по горизонтали.
 finishY- конечные координаты градиента по вертикали.

   div{filter: alpha(opacity=10, finishopacity=90, style=0,startX=10, startY=10, finishX=100, finishY=100)}

Примеры: [1]

filter blur

Фильтр blur смазывает изображение.

filter: blur( Add, direction, strength)
Может иметь значение:

 add - объект
   0- результат работы фильтра,
   1- фильтр будет наложен на исходный образец.
 direction - направление смазывания объекта в градусах
   (0 - вверх и далее по часовой стрелке с шагом 45 градусов).
 strength - степень размытия.

   img{ filter: blur(Add=1, Direction=1, Strength=15)}

Примеры: [1]

  filter chroma  

Фильтр chroma делает заданный цвет прозрачным.

filter: chroma(color)

Может иметь значение:

 color - цвет, который будет прозрачным.

   img{ filter: chroma(color=#6c75d2)}

Примеры: [1]

  filter dropshadow  

Фильтр  dropshadow создает эффект подвешенности.

 filter:  dropshadow(color, offx, offy, positive)

Может иметь значение:

 color - цвет тени.
 offx - смещение тени относительно текста по оси X.
 offy - смещение тени относительно текста по оси Y.
 positive - характер освещения (0 или 1).

   div{filter: dropshadow(color=silver, offx=3, offy=3,positive=0) }

Примеры: [1]

  filter fliph  

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

   img{ filter: fliph }

Примеры: [1]

  filter flipv  

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

   img{ filter: flipv }

Примеры: [1]

  filter glow  

Фильтр glow добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта.

filter : glow (strength, color)

Может иметь значение:

 stregth - сила свечения в диапазоне 0-100.  color - цвет свечения.

   div{ filter: glow(strength=5, color=red)}

Примеры: [1]

  filter gray  

Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах.

   img{ filter: gray()}

Примеры: [1]

  filter invert  

Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные.

   img{ filter: invert() }

Примеры: [1]

  filter mask  

Фильтр mask отображает текст так, как будто он выделен мышью.

filter:mask(Color)

Может иметь значение:

 Color - цвет, окружающий текст.

   img{ filter:mask(color=red) }

Примеры: [1]

  filter shadow  

Фильтр shadow создает эффект тени.

filter: shadow(color, direction)

Может иметь значение:

 color - цвет тени.
 direction - направление тени в градусах.

   div{ filter: shadow(color=green, direction=45) }

Примеры: [1]

  filter wave  

Фильтр wave производит "синусоидальное" искажение объекта вдоль вертикальной оси.

filter: wave(add, freq, lightStrength, phase, strength)

Может иметь значение:

 add - значение влево, определяющее использование оригинала (0 или 1). По умолчанию 0
 freq - количество волн
 lightStrength - величина подсветки
 phase - начальная фаза. По умолчанию - 0, изменяется от 0 до 100
 strength - величина смещения

   div{ filter: wave(add=0, freq=2, lightstrength=10, phase=1, strength=3)}

Примеры: [1]

  filter xray  

Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке

   img{ filter:xray()}

Примеры: [1]