Generator filtrov CSS
Ustvarjanje in vizualizacija filtrov slik CSS po meri
Preview
CSS Code
Kontrolniki filtrov
Priljubljeni filtri
Vintage
Neon Glow
Polaroid
Starinski film
Digitalna umetnost
Kako uporabljati filtre CSS
Kaj so filtri CSS?
CSS filtri vam omogočajo, da na element uporabite grafične učinke, kot sta zameglitev ali spreminjanje barv. Običajno se uporabljajo za slike, ozadja in obrobe.
Filtre je mogoče uporabiti za ustvarjanje vizualnih učinkov, izboljšanje slik ali ustvarjanje edinstvenih oblikovnih elementov brez potrebe po zunanjih orodjih za urejanje slik.
Podprte lastnosti filtrov CSS
-
blur()- Elementu uporabi Gaussovo zameglitev. -
brightness()- Prilagodi svetlost elementa. -
contrast()- Prilagodi kontrast elementa. -
grayscale()- Pretvori element v sivinske odtenke. -
hue-rotate()- Elementu uporabi rotacijo odtenka. -
invert()- Invertira barve elementa. -
opacity()- Prilagodi motnost elementa. -
saturate()- Nasiči ali razsiči element. -
sepia()- Pretvori element v sepijo.
Kako uporabiti filtre
Z uporabo kode CSS, ki jo ustvari to orodje, lahko filtre uporabite za kateri koli element HTML. To storite tako:
1. Izberite element
Izberite element HTML, na katerega želite uporabiti filter. To je lahko slika, ozadje ali kateri koli drug element.
2. Dodajte razred ali ID
Če element še nima razreda ali ID-ja, ga dodajte, da ga boste lažje ciljali s CSS-jem.
3. Uporabite filter
Uporabite CSSfilterlastnost v slogovni predlogi ali vgrajenem slogu, da uporabite ustvarjeni filter.
.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }4. Združite več filtrov
Več funkcij filtrov lahko kombinirate tako, da jih naštejete eno za drugo, ločene s presledki.
filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);Združljivost brskalnikov
Filtri CSS so široko podprti v sodobnih brskalnikih, vključno s Chromeom, Firefoxom, Safarijem, Edgeom in Opero. Vendar pa jih starejši brskalniki, kot je Internet Explorer, ne podpirajo.
Related Tools
Pretvornik Sass v CSS
Pretvorite svojo Sass kodo v CSS. Hitro, enostavno in varno.
Ustvarite popolne postavitve Flexbox
Vizualizirajte, prilagodite in ustvarite kodo CSS flexbox z našim intuitivnim vmesnikom s funkcijo povleci in spusti.
Pretvornik pisala v CSS
Pretvorite svojo kodo SCSS v CSS. Hitro, enostavno in varno.
Ustvarite čudovit CSS besedilni gradient brez napora
Ustvarite osupljive učinke preliva besedila za svojo spletno stran
Orodje za kodiranje Base64
Z lahkoto kodirajte besedilo v format Base64 kar v brskalniku.
Kalkulator zgoščevalne vrednosti SHA-1
Hitro in enostavno ustvarite zgoščene vrednosti SHA-1