CSS Filter Generator

Prilagodi efekte poput zamućenja i svjetline klizačima te generiši CSS filter kod tijekom pregleda

Informacije o ažuriranjimaCSS Filter Generator dodan, generiši sa prilagođavanjem zamućenja i svjetlinePogledaj vijesti o ažuriranju

Osobine

9 vrsta efekata s klizačima

Svaki potez klizača mijenja pregled i CSS kod istovremeno

Isprobaj sa svojom slikom

Prosljeđi sliku i vidi efekt direktno u pregledniku

Vidi original dok je pritisnuto

Usporedi prije i nakon efekta na mjestu

Počni od 8 primjera

Odaberi primjer kao što je sepia ili vintage te fine-tune vrijednosti

Kako koristiti

Odaberi sliku

Koristi "Odaberi svoju sliku" za lokalnu datoteku. Ako ne odabereš, alat koristi ugrađeni primjer slike

Prilagodi efekte

Odaberi sličan primjer ili koristi klizače za promjenu jakosti efekata

Usporedi prije i nakon

Pritisni "Usporedi s originalom" da vidiš sliku bez efekata

Kopiraj kod

Koristi "Kopiraj" gumb da prebacuješ filter liniju u svoje CSS

Primjene

Čitljivost teksta na pozadini

Zamući pozadinsku sliku kako bi naslov bio lakši za čitanje

Ujednačavanje boja fotografija

Primijeni crno-bijelu ili sepia verziju na sve slike na teamskoj stranici ili galeriji

Određivanje vrijednosti za vlastite fotografije

Testiraj vrijednosti zamućenja ili vintage efekta na stvarnoj fotografiji koju ćeš koristiti

Prilagođavanje slika za tamnu temu

Smanji svjetlinu i kontrast kako slike ne bi bile prejasne na tamnoj pozadini

Osnovna znanja

Filter funkcije i jedinice

CSS filter svojstvo primjenjuje efekte na slike i elemente koristeći funkcije poput blur i sepia odvojene razmakom.

px (pikseli)：Blur funkcija specificira radijus zamućenja u px. Na primjer, 4px znači da će boje biti pomiješane u radijusu od 4 piksela.
% (postotak)：Funkcije poput brightness i sepia koriste % za intenzitet. Za brightness, 100% je originalna svjetlina a 120% je 20% svjetlija.
deg (stupnjevi)：Hue-rotate funkcija koristi deg za rotaciju boje. Na primjer, 180deg pomiče boju na suprotnu stranu spektra.

Zašto se rezultat mijenja s redoslijedom

Funkcije se primjenjuju slijeva nadesno, što znači da se svaki sljedeći efekt primjenjuje na rezultat prethodnog. Redoslijed utječe na konačni izgled - na primjer, crno-bijela prije sepije daje drugačiji rezultat nego sepia prije crno-bijele. Ovaj alat ima fiksiran redoslijed, ali možeš urediti generirani CSS kod kako bi promijenio redoslijed.

Razlika između filter i backdrop-filter

Filter i backdrop-filter koriste iste funkcije, ali se razlikuju u tome što na što djeluju.

filter：Filter svojstvo primjenjuje efekte na sam element (slike, tekst itd.).
backdrop-filter：Backdrop-filter primjenjuje efekte na sadržaj koji se vidi iza elementa, često korišten za efekt razmućenog stakla.