🎚️Генератор на CSS филтри

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

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

• px (пиксели)：Функцијата blur го задава радиусот на заматување во px; ако наведете 4px, боите се стопуваат во опсег со радиус од 4 пиксели.
• % (процент)：Функциите brightness и sepia ја задаваат јачината на ефектот во %; кај brightness 100% е изворната осветленост, а 120% е состојба осветлена за 20%.
• deg (степени)：Функцијата hue-rotate го задава аголот на вртење на бојата по кругот на нијанси во deg; при 180deg бојата преминува во спротивната нијанса.

Зошто редоследот на пишување го менува резултатот

Функциите наредени во filter се применуваат одлево надесно, а секој следен ефект се применува врз резултатот од претходниот, па промената на редоследот може да го промени и изгледот. На пример, ако прво направите црно-бело па потоа примените сепија, останува кафеав тон, а ако прво примените сепија па потоа црно-бело, кафеавиот тон исчезнува. Во оваа алатка редоследот на примена е фиксен, но со уредување на генерираниот CSS код можете да го смените редоследот.

Разлика од backdrop-filter

filter и backdrop-filter се својства што користат исти функции, но се разликуваат по тоа врз што го применуваат ефектот.

• filter：filter е својство што применува ефект врз изгледот на самиот наведен елемент (слика, текст и слично).
• backdrop-filter：backdrop-filter е својство што применува ефект врз делот што се гледа зад наведениот елемент и се користи за ефект како матно стакло.