CSS филтър генератор

Регулирайте ефекти като размиване и яркост със слайдери и генерирайте CSS filter код с предварителен преглед

Новини за обновленияДобавен CSS филтър генератор, генерирайте с регулиране на размиване и яркостПреглед на актуализации

Характеристики

9 вида ефекти със слайдери

Преглед и CSS код се променят едновременно всеки път

Тестване със собствена снимка

Показване на локална снимка в браузъра и проверка на ефекта

Оригинална снимка само докато натискате

Сравнение на снимката преди и след ефекта на място

Фина настройка от 8 примера

Начало с примери като сепия или винтидж, след това регулиране

Как да използвате

Изберете снимка

Используйте "Изберете собствена снимка" за локална снимка. Ако не изберете, можете да тествате с вградената примерна снимка

Регулирайте ефектите

Изберете близка атмосфера от примерите или регулирайте интензитета на ефектите със слайдерите

Сравнете преди и след

Натискане на "Сравни с оригинала" показва снимката без ефект само докато натискате

Копирайте кода

Натиснете "Копирай" за копиране на един ред filter код към вашия CSS

Случаи на употреба

Четливост на текст върху фонова снимка

Размиване на фоновата снимка, така че заглавката да е по-лесна за четене

Унифициране на цветния тон на снимките

Привеждане на снимките на отборна страница или галерия към черно-бяло или сепия

Определяне на числови стойности с вашите снимки

Тестване на действителната снимка, която ще се използва, за определяне на стойности за матиране или винтидж ефект

Регулиране на снимки за тъмен режим

Определяне на стойности на намалена яркост и контрастност, за да не бъде преосветлено на тъмен фон

Основни знания

Функции и единици на filter

CSS свойството filter прилага ефекти към снимки или елементи, като blur, sepia и други функции, отделени с интервал.

px (пиксели)：Функцията blur задава радиуса на размиването в px. При 4px цветът се смесва в радиус от 4 пиксела.
% (процент)：Функциите brightness и sepia задават интензитета на ефекта в %. За brightness 100% е оригиналната яркост, 120% е 20% по-ярко.
deg (градуси)：Функцията hue-rotate завърта цвета на цветовия кръг. При 180deg цветът преминава към противоположния цвят.

Защо резултатът се променя с реда на писане

Функциите във filter се прилагат отляво надясно, като следващата функция се прилага към резултата на предишната. Например, черно-белото след sepia оставя кафявост, докато sepia след черно-белото я отстранява. Този инструмент има фиксиран ред на прилагане, но можете да променяте реда чрез редактиране на генерирания CSS код.

Разлика между filter и backdrop-filter

Свойствата filter и backdrop-filter използват еднакви функции, но се прилагат към различни цели.

filter：Filter прилага ефекти към самия елемент (снимка, текст и т.н.).
backdrop-filter：Backdrop-filter прилага ефекти към съдържанието зад елемента и се използва за эффект на матирано стъкло.