Генератор CSS-фільтрів

Майже будь-який генератор CSS-фільтрів дозволяє поєднувати blur(), brightness(), contrast() та інші функції — але в переважній більшості порядок ролі не відіграє, бо фільтри застосовуються лише в одній фіксованій послідовності. Цей інструмент інший: ланцюжок фільтрів — це справжній перевпорядковуваний список, побудований на нативному HTML5 drag-and-drop, і зміна порядку двох функцій дійсно змінює результат рендеру пікселів — точно так само, як це відбулося б у production CSS. blur-потім-hue-rotate виглядає інакше, ніж hue-rotate-потім-blur, і тепер ви можете побачити чому, перш ніж застосувати це в коді.

Завантажте власне фото — і дев'ять функцій, які можна поєднувати: blur, brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert і drop-shadow — застосовуються до нього наживо як справжня CSS-декларація filter на елементі <img>, а не як симульований зразок. Додайте функцію зі списку, перетягніть її рядок вгору чи вниз, щоб змінити позицію в ланцюжку, налаштуйте повзунок — і перегляд разом із готовим рядком filter: ...; оновляться на кожну дію. Прибрати крок можна власною кнопкою прямо в рядку.

Другий, менший ланцюжок будує значення backdrop-filter, застосоване до накладної панелі поверх перегляду, щоб показати ефект матового скла — техніку, що лежить в основі сучасних напівпрозорих навігаційних панелей і фонів модальних вікон — не торкаючись власного ланцюжка фільтрів зображення. Це працює навіть до завантаження фото, на кольоровому тлі-заглушці, тож дизайн матової панелі можна підібрати за лічені секунди.

Коли перегляд виглядає правильно, скопіюйте CSS прямо з поля виводу або експортуйте справжній PNG: той самий рядок фільтра передається властивості ctx.filter контексту Canvas 2D — яка використовує той самий синтаксис, що й CSS-властивість filter — а canvas перетворюється на файл для завантаження через canvas.toBlob(). Експортоване зображення точно збігається з живим переглядом, бо його створює той самий рядок фільтра, що проходить через той самий механізм рендеру. Усе відбувається локально у вашому браузері; ваше фото ніколи нікуди не завантажується.