Фильтры в CSS

WTBG

Старейшина
Репутация
0 / 98
Фильтры

Важно отметить, что фильтры могут быть добавлены только к элементам 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)}


filter blur

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

Код:
filter: blur(Add, direction, strength)

Значение:
  • add - объект (0 - результат работы фильтра, 1 - фильтр будет наложен на исходный образец).
  • direction - направление смазывания объекта в градусах (0 - вверх и далее по часовой стрелке с шагом 45 градусов).
  • strength - степень размытия.
Код:
img{ filter: blur(Add=1, Direction=1, Strength=15)}


filter chroma

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

Код:
filter: chroma(color)

Значение:
  • color - цвет, который будет прозрачным
Код:
img{ filter: chroma(color=#6c75d2)}


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) }


filter flipH

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

Код:
img{ filter: fliph }


filter flipV

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

Код:
img{ filter: flipv }


filter glow

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

Код:
filter: glow(strength, color)

Значение:
  • stregth - сила свечения в диапазоне 0-100.
  • color - цвет свечения.
Код:
div{ filter: glow(strength=5, color=red)}


filter gradient

Фильтр gradient позволяет заливать градиентом блочные элементы.

Код:
filter:progid:DXImageTransform.Microsoft.Gradient(gradientType, startColorStr, endColorStr)

Значение:
  • gradientType – стиль градиента (0 - вертикальный; 1 - горизонтальный);
  • startColorStr – цвет с которого начинается градиент;
  • endColorStr – цвет которым заканчивается градиент.
Код:
   div{
      width:300px;
      height:300px;
      filter:progid:DXImageTransform.Microsoft.Gradient(gradientType=0,
       startColorStr=#ff0000, endColorStr=#0000ff);
   }


filter gray

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

Код:
img{ filter: gray()}


filter invert

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

Код:
img{ filter: invert() }


filter mask

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

Код:
filter:mask(Color)

Значение:
  • Color - цвет, окружающий текст.
Код:
img{ filter:mask(color=red) }


filter shadow

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

Код:
filter: shadow(color, direction)

Значение:
  • color - цвет тени.
  • direction - направление тени в градусах.
Код:
div{ filter: shadow(color=green, direction=45) }


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)}


filter xray

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

Код:
img{ filter:xray()}


 
Сверху