CSS3

Фильтры воспроизводят в браузере визуальные эффекты, похожие на фильтры Photoshop. Фильтры можно добавлять не только к изображениям, но и к любым непустым элементам.

Набор фильтров

не ограничивается предустановленным в браузере. Вы также можете использовать фильтры SVG, загрузив их по ссылке вместе с элементом svg.

Изначально

фильтры были созданы как часть спецификации SVG. Их задачей было применение эффектов, основанных на пиксельной сетке к векторной графике. С поддержкой SVG браузерами появилась возможность использовать эти эффекты непосредственно в браузерах.

Браузеры

обрабатывают страницу попиксельно применяя заданные эффекты и отрисовывают результат поверх оригинала. Таким образом, применяя несколько фильтров можно достигать различных эффектов, они как бы накладываются друг на друга. Чем больше фильтров, тем больше времени требуется браузеру, чтобы отрисовать страницу.

Можно

применять несколько фильтров одновременно. Классический способ применения таких эффектов – при наведении на элемент :hover.

CSS3 filters

Наведите на картинку, чтобы увидеть фильтры в действии.

  • filter: blur(3px)
  • filter: brightness(40%)
  • filter: contrast(10%)
  • filter: grayscale(.75)
  • filter: saturate(300%)
  • filter: sepia(100%)
  • filter: hue-rotate(270deg)
  • filter: invert(100%)
  • filter: opacity(50%)
  • filter: url(#posterize)