У цій статті
Властивість CSS filter пояснена
Властивість CSS filter застосовує графічні ефекти — розмиття, яскравість, контраст і зміну кольорів — до будь-якого HTML-елемента. Вона працює з зображеннями, фонами, текстом і навіть цілими секціями сторінки. Фільтри обробляються GPU браузера, що робить їх ефективними для візуальних ефектів у реальному часі.
CSS надає дев'ять вбудованих функцій фільтрів: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate та sepia. Їх можна об'єднувати в одній декларації filter для створення складних візуальних ефектів. Порядок фільтрів має значення — кожна функція обробляє вивід попередньої.
Як працює кожна функція фільтра
Кожна функція фільтра приймає одне значення і трансформує візуальний вивід елемента. Розуміння того, що робить кожна функція, допомагає ефективно їх комбінувати.
- blur(px) — застосовує гаусове розмиття, роблячи елемент нечітким. Вищі значення створюють сильніше розмиття. Корисно для фонових накладень і ефектів матового скла
- brightness(%) та contrast(%) — brightness масштабує загальну яскравість (100% без змін, 200% подвійна), а contrast регулює різницю між світлими та темними ділянками
- grayscale(%), sepia(%) та hue-rotate(deg) — grayscale видаляє насиченість кольору, sepia додає теплий коричнювий тон, а hue-rotate зміщує всі кольори по кольоровому колу
Спробуйте безкоштовно — реєстрація не потрібна
Згенерувати CSS-фільтри →Створення ефектів у стилі Instagram
Накладаючи кілька функцій CSS-фільтрів, можна відтворити популярні ефекти фотофільтрів повністю в коді. Ці ефекти застосовуються в реальному часі до будь-якого елемента зображення.
- Вінтажний вигляд — поєднайте sepia(60%) з contrast(110%) і brightness(90%) для створення теплого, вицвілого ефекту фотографії, що нагадує старі плівкові камери
- Чорно-білий — використайте grayscale(100%) з contrast(120%) для монохромного ефекту з високим контрастом. Додайте brightness(110%) для яскравішого чорно-білого вигляду
- Драматичний настрій — складіть contrast(150%) з saturate(130%) і brightness(80%) для яскравої, затемненої атмосфери, де кольори виділяються на глибоких тінях
Часті запитання
Чи можна використовувати SVG-фільтри з властивістю CSS filter?
Так. Функція url() у CSS filter дозволяє посилатися на власні визначення SVG-фільтрів для ефектів, що виходять за межі вбудованих функцій. Це дозволяє створювати розширені ефекти, такі як карти зміщення та кольорові матриці.
Чи впливають CSS-фільтри на продуктивність?
CSS-фільтри прискорюються GPU в сучасних браузерах, що робить їх ефективними для більшості випадків. Прості фільтри на зображеннях мають мінімальний вплив на продуктивність. Однак застосування розмиття на великих ділянках може спричинити падіння кадрів на слабших пристроях.
Чи можна анімувати фільтри при наведенні?
Так. CSS-фільтри бездоганно працюють з переходами та анімаціями. Поширений патерн — застосування фільтра grayscale або blur за замовчуванням і перехід до оригінального вигляду при наведенні, створюючи плавні ефекти з прискоренням GPU.