CSS3 фільтри є досить цікавим відгалуженням від SVG, що дозволяє змінювати HTML-елементи і зображення, застосовуючи фільтри розмиття, яскравість і багато інших. У цьому уроці ми коротко розглянемо, як саме вони працюють.
Як це працює?
Використовуючи тільки CSS ми можемо створювати деякі досить складні ефекти. Вони можуть бути застосовані як до зображень, так і до HTML-елементів. Властивість, яке використовується для управління всіма цими ефектами - це filter.
filter. filter # 40; value # 41; ;
Як і слід було очікувати, для цього властивості потрібне використання префікса браузера. Але на даний момент, тільки -webkit- (Chrome і Safari) є єдиним двигуном браузерів, що підтримують цю властивість.
-webkit-filter. filter # 40; value # 41; ;
-moz-filter. filter # 40; value # 41; ;
-o-filter. filter # 40; value # 41; ;
-ms-filter. filter # 40; value # 41; ;
фільтрація
Існує цілий ряд фільтрів, тому, щоб отримати більш повне уявлення про кожного з них, давайте розглянемо їх окремо. Кілька фільтрів можуть бути застосовані до одного елементу (через пробіл), наприклад, brightness і blur:
filter. blur # 40; 5px # 41; brightness # 40; 0.5 # 41; ;
Є кілька фільтрів, які не будуть розглянуті нижче, але їх можна легко реалізувати з уже існуючими CSS (прозорість і тіні). Ось оригінальне зображення, яке ми будемо використовувати для демонстрації роботи фільтрів:
Я буду приводити фото c застосуванням фільтра (перше фото) та результат роботи фільтру у вигляді статичного зображення (друге фото), якщо ви використовуєте браузер, який не підтримує фільтри і не можете побачити результат.
Завжди хотіли зробити гауссовское розмиття для зображення або тексту тільки за допомогою одного CSS? З фільтрами ви це зможете! Розумієте вимірюється в пікселях, так що ви можете зробити щось на зразок цього:
filter. blur # 40; 5px # 41; ;
// Browser Specific
-webkit-filter. blur # 40; 5px # 41; ;
-moz-filter. blur # 40; 5px # 41; ;
-o-filter. blur # 40; 5px # 41; ;
-ms-filter. blur # 40; 5px # 41; ;
Яскравість вимірюється від нуля до одиниці, 1 - це повна яскравість (білий колір), а 0 - початкова яскравість.
filter. brightness # 40; 0.2 # 41; ;
// Browser Specific
-webkit-filter. brightness # 40; 0.2 # 41; ;
-moz-filter. brightness # 40; 0.2 # 41; ;
-o-filter. brightness # 40; 0.2 # 41; ;
-ms-filter. brightness # 40; 0.2 # 41; ;
насиченість
Насиченість вимірюється у відсотках.
filter. saturate # 40; 50% # 41; ;
// Browser Specific
-webkit-filter. saturate # 40; 50% # 41; ;
-moz-filter. saturate # 40; 50% # 41; ;
-o-filter. saturate # 40; 50% # 41; ;
-ms-filter. saturate # 40; 50% # 41; ;
поворот тони
Цей фільтр дозволяє змінювати тон, повернувши його (уявіть собі колесо квітів, які ви потім повертаєте). Він вимірюється в градусах.
filter. hue-rotate # 40; 20deg # 41; ;
// Browser Specific
-webkit-filter. hue-rotate # 40; 20deg # 41; ;
-moz-filter. hue-rotate # 40; 20deg # 41; ;
-o-filter. hue-rotate # 40; 20deg # 41; ;
-ms-filter. hue-rotate # 40; 20deg # 41; ;
контрастність
Констрастності, знову ж таки, вимірюється у відсотках. 100% є значенням за замовчуванням, 0% дозволить створити повністю чорне зображення. Все, що понад 100% додає контраст!
filter. contrast # 40; 150% # 41; ;
// Browser Specific
-webkit-filter. contrast # 40; 150% # 41; ;
-moz-filter. contrast # 40; 150% # 41; ;
-o-filter. contrast # 40; 150% # 41; ;
-ms-filter. contrast # 40; 150% # 41; ;
Також вимірюється у відсотках. Доступні значення від 0% до 100%. Як не дивно, на даний момент, webkit не підтримує інверсії, якщо вони менше, ніж 100%.
filter. invert # 40; 100% # 41; ;
// Browser Specific
-webkit-filter. invert # 40; 100% # 41; ;
-moz-filter. invert # 40; 100% # 41; ;
-o-filter. invert # 40; 100% # 41; ;
-ms-filter. invert # 40; 100% # 41; ;
знебарвлення
Знову ж, вказуєте значення у відсотках, на яке ви хочете знебарвити зображення. Доступні значення від 0% до 100%.
filter. grayscale # 40; 100% # 41; ;
// Browser Specific
-webkit-filter. grayscale # 40; 100% # 41; ;
-moz-filter. grayscale # 40; 100% # 41; ;
-o-filter. grayscale # 40; 100% # 41; ;
-ms-filter. grayscale # 40; 100% # 41; ;
filter. sepia # 40; 100% # 41; ;
// Browser Specific
-webkit-filter. sepia # 40; 100% # 41; ;
-moz-filter. sepia # 40; 100% # 41; ;
-o-filter. sepia # 40; 100% # 41; ;
-ms-filter. sepia # 40; 100% # 41; ;