CSS szűrők

A CSS szűrők lehetővé teszik, hogy különböző vizuális hatásokat alkalmazzunk képekre és más elemekre. Ezek a hatások a grafikus szerkesztőkből ismert funkciókat hozzák el a webre, például az elmosást, a szürkeárnyalatos megjelenítést vagy az árnyékokat.

A filter tulajdonság alapjai

A <filter> tulajdonság CSS-ben olyan vizuális effekteket engedélyez, mint a blur, a brightness vagy a contrast. Ezek láncolhatók is, így egyszerre több hatás is érvényesíthető.

Képek szűrése

A szűrők leggyakrabban képeken jelennek meg, például szürkeárnyalatossá alakítva, elmosva vagy színezve őket. Ez különösen hasznos dizájn kiemelésekhez vagy hover-effektekhez.

Kód részletek

<img src="https://placehold.co/200x100/png" style="filter: grayscale(100%);">

<img src="https://placehold.co/200x100/png" style="filter: blur(5px);">

Előnézet

Árnyékok és speciális hatások

A drop-shadow szűrő különösen népszerű, mivel természetes árnyékhatást hoz létre. A hagyományos box-shadow-hoz képest a szűrős árnyék jobban követi a kép átlátszóságát.

Tippek a szűrők használatához

A szűrők erős eszközök, de oda kell figyelni a teljesítményre és a felhasználói élményre.

• Kerüld a túl sok szűrő kombinálását, mert lassíthatja az oldalt.
• Használj hover-effekteket szűrőkkel a vizuális kiemeléshez.
• Teszteld a hatásokat különböző böngészőkben, mert előfordulhatnak eltérések.