Редагування зображень в CSS: фільтри

48

Від автора: уявіть ситуацію: вам потрібно зробити копію зображення з вашого сайту, але з більшою контрастністю, розмиття або яскравістю. До появи CSS фільтрів вам залишалося або завантажувати декілька версій зображення, або маніпулювати ними за допомогою JavaScript. Якщо ви самі не хочете возитися із зображеннями, вам допоможуть CSS фільтри. Давайте почнемо цей урок з короткого обговорення усіх фільтрів.

Фільтр розмиття

Фільтр застосовує до зображення розмиття за Гаусом. Необхідно вказати довжину, яка визначає кількість взаимосмешиваемых пікселів. Чим більше значення, тим сильніше розмиття. Радіус розмиття можна задавати у відсотках. Якщо цей параметр не заданий, використовується нульове значення. Синтаксис фільтра:

filter: blur( )

Фільтр blur() не приймає негативні значення.

Редагування зображень в CSS: фільтри

Фільтр яскравості

Фільтр застосовує до зображень лінійний множник, роблячи їх яскравіше або темніше. Приймаються числа та відсотки. Зі значенням 0% ви отримаєте повністю чорне зображення, а 100% дасть оригінал. Значення вище 100% освітлення зображення. Досить велике значення зробить зображення повністю білим. Синтаксис фільтра:

filter : brightness( [ | ] )

Фільтр також не приймає негативні значення.

Редагування зображень в CSS: фільтри

Фільтр контрастності

Фільтр змінює контраст зображень. Як і в фільтрі яскравості, тут приймаються числа та відсотки. 0% дасть повністю сіре зображення, 100% дасть нам оригінал, а значення вище 100% збільшують контрастність. У фільтрі contrast() можна використовувати негативні значення. Синтаксис фільтра:

filter : contrast( [ | ] )

Редагування зображень в CSS: фільтри

Фільтр падаючої тіні

Майже кожен з вас хоч раз використовував властивість box-shadow. Властивість застосовується до блоків, в цьому його головна проблема. Властивість можна використовувати на незвичайних формах. Однак фільтр drop-shadow створює тінь по краях зображення. Фільтр являє собою розмиту версію альфа маски самого зображення. Синтаксис drop-shadow:

filter : drop-shadow( {2,3} ? )

Перші два значення length обов’язкові, вони задають горизонтальне і вертикальне зміщення тіні. Третє значення опціональне. Чим більше значення, тим світліше буде тінь. У демо нижче показана робота цього фільтра. Якщо навести на пінгвіна курсор миші, тінь стане червоною.

Фільтр відтінків сірого

Фільтр робить зображення чорно-білими. 0% дасть нам оригінал, а 100% перетворить зображення в чорно-біле. Ефект фільтра в рамках цих значень змінюється за лінійним множнику. Фільтр grayscale() не приймає негативні значення. Синтаксис:

filter : grayscale( [ | ] )

Редагування зображень в CSS: фільтри

Фільтр поворот кольору

Фільтр змінює колір зображень. Параметр визначає кут у градусах на колірному колесі, на який зрушаться кольору зображення. 0deg дасть нам оригінал, значення вище 360deg повторюються. Синтаксис фільтра:

filter : hue-rotate( )

Редагування зображень в CSS: фільтри

Фільтр інверсії

Фільтр інвертує кольори зображення. Сила інверсії залежить від значення переданого параметра. 0% ніяк не позначиться на зображенні, 100% повністю інвертує кольори, а на 50% ми отримаємо повністю сіре зображення. Сила ефекту визначається лінійним множником у рамках цих значень. Фільтр не приймає негативні значення. Синтаксис фільтра invert():

filter : invert( [ | ] )

Редагування зображень в CSS: фільтри

Фільтр прозорості

Фільтр робить зображення прозорим. Значення 0% робить зображення повністю прозорим, а 100% дасть нам оригінал.
Фільтр працює як властивість opacity в CSS. Різниця лише в тому, що деякі браузери для підвищення продуктивності включають апаратне прискорення для даного фільтра. Синтаксис:

filter: opacity( [ | ] );

Редагування зображень в CSS: фільтри

Фільтр насиченості

Фільтр контролює насиченість зображень. Сила ефекту залежить від параметра. Від’ємні значення не приймаються. При мінімальному значенні 0% зображення повністю втрачає насиченість. 100% ніяк не змінює зображення. Для збільшення насиченості необхідно використовувати значення вище 100%. Синтаксис:

filter : saturate( [ | ] )

Редагування зображень в CSS: фільтри

Фільтр сепії

Фільтр надає зображенню відтінок сепії. 100% дає повний ефект сепії, а 0% дасть нам оригінал. Сила ефекту в межах цих значень змінюється за лінійним множнику. Негативні значення заборонені. Синтаксис sepia():

filter : sepia( [ | ] )

Редагування зображень в CSS: фільтри

Фільтр URL

Виникає ситуація, коли вам потрібно створити свій фільтр. Фільтр url задає посилання на XML файл з SVG фільтром. Також можна вказати якір на елемент filter. Приклад з постеризацией зображення:

// Фільтр
// CSS код для застосування фільтра
filter: url(#posterize);

Результат буде схожий на зображення нижче:

Редагування зображень в CSS: фільтри

Робота з кількома фільтрами

Якщо вам не вистачає одного фільтра, можна застосувати комбінацію фільтрів на одному зображенні. Порядок застосування фільтрів несильно впливає на результат. Кілька фільтрів можна застосувати наступним чином:

filter : sepia(0.8) contrast(2);
filter : saturate(0.5) hue-rotate(90deg) brightness(1.8);

Редагування зображень в CSS: фільтри

Перший фільтр застосовується до оригінального зображення, решта – до результату попереднього фільтра.

У деяких випадках порядок фільтрів сильно впливає на результат. Приміром, sepia() після grayscale() дасть на виході сепію, а grayscale() після sepia() дасть чорно-біле зображення.

Анімація фільтрів

Властивість filter можна анімувати. Правильна комбінація зображення і фільтрів може дати приголомшливий ефект. Погляньте на наступний код:

@keyframes day-night {
0% {
filter: hue-rotate(0deg) brightness(120%);
}
10% {
filter: hue-rotate(0deg) brightness(120%);
}
20% {
filter: hue-rotate(0deg) brightness(150%);
}
90% {
filter: hue-rotate(180deg) brightness(10%);
}
100% {
filter: hue-rotate(180deg) brightness(5%);
}
}

Для імітації дня і ночі я використовую фільтри hue-rotate() і brightness() в зв’язці. Оригінальне зображення має жовтогарячий відтінок. До 20% в анімації я не чіпаю поворот кольору і плавно збільшуючи яскравість, що створює ефект сонячного дня. До кінця ж анімації я повертаю кольору на 180 градусів, що дає нам блакитний відтінок. В парі з низькою яскравістю ми отримуємо ефект ночі.

Заключні думки

Крім 11 фільтрів, які ми обговорили, є ще один — custom(). З допомогою шейдерів цей фільтр дозволяє створювати абсолютно різні ефекти. У фільтра custom() є кілька проблем, які сповільнили його розвиток. Adobe активно працюють над вирішенням проблем, які виникають при використанні фільтра custom(). На щастя, незабаром їх напрацювання стануть доступні розробникам, і останні зможуть використовувати їх у своїх проектах.

Повертаємось до теми. Фільтри застосовуються до всього зображення, включаючи тест, фон і рамку.

По двох останніх розділів видно, що CSS фільтри можуть повністю змінити зображення. Тим не менш, іноді цього замало. У наступній частині я розповім вам, як працювати з режимами накладення.