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%);

}

Переглядачі

• Стаціонарні переглядачі
• Мобільні переглядачі

Приклади

• Приклад 1
• Приклад 2
• Приклад 3

img {


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


    filter: blur(5px);


}