filter CSS значення

Властивість filter призначена для застосування художніх ефектів до елементів. Зазвичай використовується для зображень, щоб розмити їх, збільшити контрастність, перетворити в чорно-білу картинку і ін.

CSS-фільтри - це потужний інструмент, який може бути використаний для досягнення різних візуальних ефектів (наприклад, фільтри Photoshop для браузера). Властивість filter забезпечує доступ до ефектів, таких як розмиття або переміщення кольорів на рендеринг елемента перед тим, як елемент відображається. Фільтри зазвичай використовуються для налаштування візуалізації зображення, фону або кордону.

Синтаксис:

.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}

Де filter-function може приймати наступні функції:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()
  • url() - for applying SVG filters
  • custom() - "coming soon"

Можна використовувати декілька функцій, розділяючи пробілом.

Приклад використання одного фільтра:

.blur-me {
  filter: blur(20px);
}

Приклад використання декількох фільтрів:

.do-more-things {
  filter: blur(20px) grayscale(20%);
}
Нотатка:

Internet Explorer c версії 4 по 10 підтримує інше нестандартне властивість filter з тим же ім'ям, але іншим синтаксисом.

Нотатка:

Chrome, Opera і Safari підтримують властивість -webkit-filter.

Переглядачі

Переглядач
filter

53.0
18.0 -webkit-

13.0

35.0

9.1
6.0 -webkit-

40.0
15.0 -webkit-


Мобільних переглядачів ще не додано.

Приклади


Динамічний приклад.

Демонстрація всіх функцій:

Синтаксис властивості.

img {
    -webkit-filter: blur(5px);  /* Safari */
    filter: blur(5px);
}

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів