CSS-фільтри - це потужний інструмент, який автори можуть використовувати для досягнення різних візуальних ефектів (на зразок фільтрів Photoshop для браузера). filterВластивість CSS забезпечує доступ до таких ефектів, як розмиття або зміна кольору на візуалізації елемента, перш ніж елемент відображатиметься. Фільтри зазвичай використовуються для налаштування візуалізації зображення, фону або межі.
Синтаксис:
.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )Існує ряд функцій, які слід використовувати для значення:
blur()brightness()contrast()drop-shadow()grayscale()hue-rotate()invert()opacity()saturate()sepia()url()- для застосування SVG-фільтрівcustom()- "незабаром"
Можна використовувати кілька функцій, розділених пробілом.
.do-more-things ( filter: blur(20px) grayscale(20%); )Функції фільтра
Щоб використовувати властивість фільтра CSS, ви вказуєте значення для однієї з наведених вище функцій. Якщо значення недійсне, функція повертає значення "немає". За винятком випадків, коли зазначено, функції, які приймають значення, виражене знаком відсотка (як у 34%), також приймають значення, виражене як десяткове (як у 0,34).
Ось демонстрація, яка дозволяє трохи пограти з окремими фільтрами:
відтінки сірого ()
filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);Перетворює вхідне зображення у відтінки сірого. Значення "суми" визначає частку конверсії. Значення 100% - це повністю відтінки сірого. Значення 0% залишає введення без змін. Значення від 0% до 100% є лінійними множниками ефекту. Якщо параметр “сума” відсутній, використовується значення 100%. Негативні значення не допускаються.
сепія ()
filter: sepia(0.8); /* same as… */ filter: sepia(80%);Перетворює вхідне зображення у сепію. Значення "суми" визначає частку конверсії. Значення 100% - це повністю сепія. Значення 0 залишає введення без змін. Значення від 0% до 100% є лінійними множниками ефекту. Якщо параметр “сума” відсутній, використовується значення 100%. Негативні значення не допускаються.
насичувати ()
filter: saturate(2); /* same as… */ filter: sature(200%);Насичує вхідне зображення. Значення "суми" визначає частку конверсії. Значення 0% абсолютно ненасичене. Значення 100% залишає введені дані незмінними. Інші значення є лінійними множниками ефекту. Допускаються значення понад 100%, що забезпечують надмірно насичені результати. Якщо параметр “сума” відсутній, використовується значення 100%. Негативні значення не допускаються.
hue-rotate ()
filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);Застосовує обертання відтінків до вхідного зображення. Значення “кут” визначає кількість градусів навколо кольорового кола, вхідні зразки яких будуть коригуватися. Значення 0deg залишає введення без змін. Якщо параметр “кут” відсутній, використовується значення 0deg. Максимальне значення - 360deg.
інвертувати ()
filter: invert(100%);Інвертує зразки у вхідному зображенні. Значення "суми" визначає частку конверсії. Значення 100% повністю інвертоване. Значення 0% залишає введення без змін. Значення від 0% до 100% є лінійними множниками ефекту. Якщо параметр “сума” відсутній, використовується значення 100%. Негативні значення не допускаються.
непрозорість ()
filter: opacity(0.5); /* same as… */ filter: opacity(50%);Застосовує прозорість до зразків на вхідному зображенні. Значення "суми" визначає частку конверсії. Значення 0% є повністю прозорим. Значення 100% залишає введені дані незмінними. Значення від 0% до 100% є лінійними множниками ефекту. Це еквівалентно множенню вхідних зразків зображення на величину. Якщо параметр “сума” відсутній, використовується значення 100%. Ця функція подібна до більш усталеної властивості непрозорості; різниця полягає в тому, що за допомогою фільтрів деякі браузери забезпечують апаратне прискорення для кращої роботи. Негативні значення не допускаються.
яскравість ()
filter: brightness(0.5); /* same as… */ filter: brightness(50%);Застосовує лінійний множник до вхідного зображення, роблячи його більш-менш яскравим. Значення 0% створить зображення, яке буде повністю чорним. Значення 100% залишає введені дані незмінними. Інші значення є лінійними множниками ефекту. Допускаються значення суми понад 100%, що забезпечує більш яскраві результати. Якщо параметр “сума” відсутній, використовується значення 100%.
контраст ()
filter: contrast(4); /* same as… */ filter: contrast(400%);Регулює контрастність вхідного сигналу. Значення 0% створить зображення, яке буде повністю чорним. Значення 100% залишає введені дані незмінними. Допускаються значення, що перевищують 100%, забезпечуючи результати з меншою контрастністю. Якщо параметр “сума” відсутній, використовується значення 100%.
розмиття ()
filter: blur(5px); filter: blur(1rem);Застосовує розмиття Гауса до вхідного зображення. Значення "радіус" визначає значення стандартного відхилення до функції Гауса або скільки пікселів на екрані змішуються один з одним, тому більше значення створюватиме більше розмитості. Якщо параметр не вказаний, використовується значення 0. Параметр вказаний як довжина CSS, але не приймає процентних значень.
тінь()
filter: drop-shadow((2,3) ?)Застосовує ефект тіні до вхідного зображення. Тінь - це фактично розмита, зміщена версія альфа-маски вхідного зображення, намальована певним кольором, складена під зображенням. Функція приймає параметр типу (визначений у CSS3 Backgrounds), за винятком того, що ключове слово 'inset' заборонено.
Ця функція подібна до більш усталеної властивості box-shadow; різниця полягає в тому, що за допомогою фільтрів деякі браузери забезпечують апаратне прискорення для кращої роботи.
Тінь-падіння також імітує передбачувані контури об’єктів, природно, на відміну від того, box-shadowщо трактує лише поле як шлях.
Так само, як і в текстовій тіні, не існує параметра 'поширення' для створення суцільної тіні, більшої за об'єкт.
url ()
filter: url()url()Функція приймає розташування файлу XML , який визначає SVG фільтр, і може включати в себе якір на елемент спеціального фільтра. Ось підручник, який працює як гарне вступ до фільтрів SVG із цікавою демонстрацією.
Анімаційні фільтри
Оскільки фільтри анімаційні, він може відкрити двері для цілої купки розваг.
Примітки
Ви можете поєднувати будь-яку кількість функцій для маніпулювання візуалізацією, але порядок все одно має значення (тобто використання grayscale()after sepia()призведе до повністю сірого виводу).
Обчислюване значення, відмінне від “none”, призводить до створення контексту стекування так само, як це робить прозорість CSS. Властивість фільтра не впливає на геометрію моделі коробки цільового елемента, навіть незважаючи на те, що фільтри можуть спричиняти фарбування поза межами рамки елемента. На будь-які частини цільового елемента впливають функції фільтра. Це включає будь-який вміст, фон, межі, оформлення тексту, структуру та видимий механізм прокрутки елемента, до якого застосовано фільтр, та механізмів його нащадків. Фільтри також можна застосовувати до вбудованого вмісту, наприклад, до окремих інтервалів тексту.
Специфікація також вводить функцію filter(image-URL, filter-functions)обгортки для зображення. Це дозволить вам відфільтрувати будь-яке зображення під час використання його в CSS. Наприклад, ви можете розмити фонове зображення, не розмиваючи текст. Ця функція фільтра ще не підтримується у веб-переглядачах. Тим часом ви можете застосувати як фон, так і фільтр до псевдоелемента, щоб створити подібний ефект.
Фірмовий фільтр IE
Також використовували filterвластивість, наприклад:
.half-opacity ( -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); )В основному використовується для непрозорості, коли вам потрібно було підтримувати IE 8 і нижче.
Більше інформації
- Специфікація ефектів фільтра W3C
- http://html5-demos.appspot.com/static/css/filters/index.html
- Галерея фільтрів Беннета Філі
- Документи MDN
- Чи можу я використовувати
- http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
- https://github.com/Schepp/CSS-Filters-Polyfill
- Розуміння ефектів фільтра CSS
Підтримка браузера
Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.
Робочий стіл
| Chrome | Firefox | IE | Край | Сафарі |
|---|---|---|---|---|
| 18 * | 35 | Ні | 79 | 6 * |
Мобільний / планшетний
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 | 4,4 * | 6,0-6,1 * |