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 з тим же ім'ям, але іншим синтаксисом.

автор: Svitlana правити

Нотатка

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

автор: Svitlana правити

+ додати пораду чи нотатку

Переглядачі

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

Підтримка: стаціонарні переглядачі

Переглядач
filter	53.0 <br>18.0 -webkit-	35.0	9.1 <br>6.0 -webkit-	40.0 <br>15.0 -webkit-	13.0

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

Приклади

+ запропонувати свій приклад у пісочниці

<img src="/img/logo.svg" alt="чітке">
<img class="blurred" src="/img/logo.svg" alt="розмите">

img {
    width: 140px;
}

.blurred {
    filter: blur(5px);
}