CSS Filter Generator

Podešavajte efekte kao što su blur i osvetljenost sa klizačima i generišite CSS filter kod sa pregledom

Informacije o ažuriranjimaDodati CSS Filter Generator, prilagoditi zamućenje i svetlost za generisanjePogledaj ažuriranja

Karakteristike

9 efekata sa klizačima

Pregled i CSS kod se menjaju istovremeno kako pomerate klizač

Testirajte sa svojom slikom

Učitajte vašu sliku u pregledaču i vidite efekte u realnom vremenu

Originalna slika na duži dodir

Uporedite pre i posle primene efekta na istom mestu

Fino podešavanje od 8 šablona

Počnite od šablona kao što su sepia ili vintage i precizirajte

Kako se koristi

Izaberite sliku

Kliknite na "Izaberite vašu sliku" da učitate lokalnu sliku. Ako ne učitate, možete koristiti ugrađeni šablon slike

Podešavajte efekte

Izaberite šablon sa sličnom atmosferom ili podesite intenzitet svakog efekta sa klizačima

Uporedite pre i posle

Držite pritisnuto "Uporedi sa originalom" da vidite sliku bez efekta

Kopirajte kod

Kliknite na "Kopiraj" da kopirate filter liniju u vaš CSS

Primena

Čitljivost teksta na pozadini

Malo zamutite pozadinu fotografije da biste poboljšali čitljivost naslova

Ujednačavanje tona fotografija

Učinite sve fotografije na timskom sajtu ili galeriji crno-belim ili sepia tonom

Određivanje vrednosti sa stvarnim fotografijama

Primenite efekte na stvarne fotografije koje ćete koristiti i odredite vrednosti za mutne ili vintage tonove

Podešavanje slike za tamni režim

Smanjite osvetljenost i kontrast kako fotografija ne bi bila prejaka na tamnoj pozadini

Osnovno znanje

Filter funkcije i jedinice

CSS filter svojstvo primenjuje efekte na slike ili elemente, kombinujući funkcije kao blur i sepia odvojene razmakom.

px (pikseli)：Blur funkcija koristi px za polumjer zamućenja. Sa 4px, boje se mešaju u radiusu od 4 piksela.
% (procenat)：Brightness i sepia funkcije koriste % za intenzitet efekta. Za brightness, 100% je originalna osvetljenost, 120% je 20% svetlije.
deg (stepeni)：Hue-rotate funkcija koristi deg za rotaciju boja. Sa 180deg, boja se menja na suprotnu na bojnoj kružnici.

Zašto redosled primene menja rezultat

Filter funkcije se primenjuju redom od leva ka desnu, pa svaka naredna funkcija deluje na rezultat prethodne. Zato redosled može promeniti izgled. Na primer, crno-belo pa onda sepia čuva braon ton, dok sepia pa onda crno-belo gubi braon ton. Alat ima fiksni redosled, ali generirani CSS kod možete urediti da promenite redosled funkcija.

Razlika od backdrop-filter

Filter i backdrop-filter koriste iste funkcije, ali se primenjuju na različite stvari.

filter：Filter svojstvo primenjuje efekte na sam element (sliku, tekst itd.)
backdrop-filter：Backdrop-filter svojstvo primenjuje efekte na pozadinu koja se vidi iza elementa, koristi se za efekte kao što je zamrzlo staklo.