Від автора: фільтри спочатку входили в специфікацію SVG. Пізніше люди зрозуміли, що це дуже корисний інструмент, і W3C почали роботу по додаванню деяких поширених фільтрів CSS. CSS фільтри – досить потужний і простий інструмент. З їх допомогою можна робити розмиття, змінювати яскравість або насиченість зображень і т. д. Фільтри можна використовувати як окремо, так і в комбінаціях.
Для застосування фільтра необхідно використовувати наступний синтаксис:
filter: []* | none
Давайте коротко пройдемося по всіх фільтрів.
Яскравість
За допомогою цього фільтра можна керувати яскравістю зображень. В якості параметра приймається значення більше або рівне нулю. Якщо задати значення 0%, то ми отримаємо повністю чорне зображення. Точно так само значення 100% дасть нам початкове зображення. Для освітлення зображення можна задати значення більше 100%. Наприклад, значення 300% зробить зображення в 3 рази світліше:
img {
filter: brightness(300%);
}
Контраст
За допомогою цього фільтра можна управляти контрастом зображень. Як і яскравість, тут приймається значення більше або рівне нулю. Фільтр контролює різницю між світлими і темними частинами зображення в CSS. Тобто значення 0% дасть нам сіре зображення. Значення 100% дасть нам початкове зображення, а значення вище 100% будуть збільшувати контраст зображення:
img {
filter: contrast(0%);
}
Відтінки сірого
З назви зрозуміло, що фільтр допомагає робити зображення чорно-білим. Фільтр поступово конвертує всі кольори зображення у відтінки сірого. Значення 0% не матиме ніякого ефекту на зображення, а 100% зробить зображення повністю чорно-білим. Від’ємні значення не приймаються.
img {
filter: grayscale(100%);
}
Насиченість
Фільтр управляє насиченістю кольорів зображень. Значення 0% прибере всі кольори зображення, а значення вище 100% додасть контрастності. На 100% ми бачимо оригінальне зображення. Від’ємні значення не приймаються.
img {
filter: saturate(0%);
}
Сепія
Фільтр додає сепію, як на старих фотографіях. Насиченість сепії залежить від значення у відсотках. Зі значенням 0% ми бачимо оригінал, а 100% дасть нам повну сепію.
img {
filter: sepia(100%);
}
Поворот кольору
Фільтр змінює всі кольори зображень. Кут повороту кольорів залежить від заданого параметра. При значенні 0deg зображення залишається незмінним. У даного фільтра немає максимального значення, однак вище 360deg ефект починає повторюватися. Тобто значення 90deg і 450deg дадуть однаковий результат.
img {
filter: hue-rotate(90deg);
}
Інверсія
Фільтр інвертує кольори зображень. Сила інверсії залежить від параметра. Значення 0% ніяк не вплине на зображення, а 100% повністю його інвертує.
img {
filter: invert(100%);
}
Розмиття
Фільтр застосовує до зображень розмиття за Гаусом. Кольори починають перемішуватися і наповзає один на одного. Переданий параметр радіуса задає кількість пікселів на екрані, які будуть змішуватися. Чим більше значення, тим сильніше розмиття. Фільтр приймає значення в будь-якій формі, крім відсотків.
img {
filter: blur(1px);
}
Прозорість
Фільтр додає прозорості зображень. На 100% зображення буде повністю непрозорим, а при 0% повністю прозорим. Фільтр працює точно так само, як відоме властивість opacity, різниця тільки в продуктивності. Властивість filter використовує апаратне прискорення в деяких браузерах, що може підвищити його продуктивність.
img {
filter: opacity(75%);
}
Отбрасываемая тінь
За назвою зрозуміло, що фільтр додає ефект тіні до зображень. Насправді, це розмита версія альфа маски зображення зі зрушенням з заданим кольором. Властивості необхідно вказати зміщення по осі Х, У, а також колір тіні. Також можна вказати радіус розмиття, щоб регулювати різкість краю тіні.
img {
filter: drop-shadow(5px 5px 10px #666);
}
Url()
Всі фільтри до цього моменту були досить загальними, хоча і корисними. Однак вашого проекту може знадобитися щось специфічне. Якщо жоден з фільтрів вище вам не підійшов, ви можете створити свій SVG фільтр і через id передати його у фільтр url().
img {
filter: url(‘#greenish’);
}
Об’єднання і анімація фільтрів
Для отримання різних ефектів можна об’єднувати кілька фільтрів. У більшості випадків порядок фільтрів не має значення, проте вони застосовуються в тому порядку, в якому вони прописані в CSS, і деякі фільтри переписують інші. Наприклад, якщо використовувати фільтр sepia після grayscale, то ми отримаємо сепію і навпаки. Фільтри анімацію. Якщо правильно все зробити, можна добитися цікавого ефекту. Розберемо приклад нижче:
img {
animation: haunted 3s infinite;
}
@keyframes haunted {
0% {
filter: brightness(20%);
}
48% {
filter: brightness(20%);
}
50% {
filter: sepia(1) contrast(2) brightness(200%);
}
….
96% {
filter: brightness(400%);
}
}
У коді вище на різних етапах анімації застосовуються різні фільтри. Результат можна подивитися в демо нижче:
Раптова зміна яскравості і контрастності з повною сепією в середині анімації надають драматизму. Кращий спосіб зрозуміти принцип роботи – самому експериментувати з анімацією фільтрів!
Зауваження
Навіть якщо фільтр візуально вилазить за межі блокової моделі елемента, він ніяк не впливає на геометрію блокової моделі. Пам’ятайте, що фільтри впливають на всі частини елементів: фон, рамки, текст. Фільтри можна застосовувати до відео і тег iframe. Демо нижче ілюструє цю концепцію.
Всі фільтри сильно змінюють зображення, розумно працюють з продуктивністю, крім ефекту blur, який може уповільнити браузер, якщо в ньому не використовується апаратне прискорення. Продуктивність фільтра url() буде залежати від застосованого SVG фільтра.
Властивість filter підтримується у всіх основних браузерах. У Chrome і Opera потрібно додавати префікс. Немає підтримки в IE, хоча Edge частково підтримує фільтр. Часткова підтримка означає, що Edge підтримує всі фільтри, крім url().
Висновок
У цій статті ми розкрили безліч можливостей в CSS фільтрах, які доступні для розробників. Фільтри мають високу підтримку в браузерах, їх легко застосовувати, їх продуктивність вище, ніж canvas. Крім того, як я сказав в останньому розділі, їх можна застосовувати до відео та іншим елементам.
