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:

.filtered-image { filter: blur(5px) brightness(110%) contrast(120%); }

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.