Mik azok a CSS szűrők?

A CSS-szűrők lehetővé teszik olyan grafikus effektusok alkalmazását, mint az elmosódás vagy a színeltolás egy elemre. Általában képekhez, hátterekhez és szegélyekhez használják őket.

A szűrők segítségével vizuális effektusokat hozhat létre, képeket javíthat vagy egyedi tervezési elemeket hozhat létre külső képszerkesztő eszközök nélkül.

Támogatott CSS-szűrő tulajdonságok

• blur()- Gauss-életlenítést alkalmaz az elemre.
• brightness()- Beállítja az elem fényerejét.
• contrast()- Beállítja az elem kontrasztját.
• grayscale()- Az elemet szürkeárnyalatossá alakítja.
• hue-rotate()- Színárnyalat-elforgatást alkalmaz az elemre.
• invert()- Megfordítja az elem színeit.
• opacity()- Beállítja az elem átlátszóságát.
• saturate()- Telíti vagy telítetleníti az elemet.
• sepia()- Az elemet szépiává alakítja.

Szűrők alkalmazása

Az eszköz által generált CSS-kód segítségével szűrőket alkalmazhat bármely HTML-elemre. Ezt a következőképpen teheti meg:

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

filter: blur(2px) brightness(110%) contrast(120%) saturate(150%);

Böngésző kompatibilitás

A CSS-szűrők széles körben támogatottak a modern böngészőkben, beleértve a Chrome-ot, a Firefoxot, a Safarit, az Edge-t és az Operát. A régebbi böngészők, például az Internet Explorer azonban nem támogatják őket.