CSS — Фильтры.

Для более элегантного оформления своих сайтов можно использовать дополнительные возможности CSS, например такие как стили. Они с легкостью заменят фоновые картинки, что значительно украсит сайт при минимальном увеличении размера загружаемого контента. Но следует отметить, что фильтры по разному обрабатываются в разных браузерах.Важно отметить, что фильтры могут быть добавлены только к элементам 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()}

Оставить комментарий


Примечание - Вы можете использовать эти HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

=