CSS-Filter

CSS-Filter ermöglichen es, verschiedene visuelle Effekte auf Bilder und andere Elemente anzuwenden. Diese Effekte bringen Funktionen ins Web, die aus Grafikeditoren bekannt sind, wie z. B. Unschärfe, Graustufen oder Schatten.

Grundlagen der Eigenschaft filter

Die Eigenschaft <filter> in CSS ermöglicht visuelle Effekte wie blur, brightness oder contrast. Diese können auch verkettet werden, sodass mehrere Effekte gleichzeitig angewendet werden können.

Filter auf Bilder anwenden

Filter werden am häufigsten auf Bildern verwendet, z. B. um sie in Graustufen umzuwandeln, unscharf zu machen oder einzufärben. Das ist besonders nützlich für Design-Hervorhebungen oder Hover-Effekte.

Code-Details

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

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

Vorschau

Schatten und spezielle Effekte

Der drop-shadow-Filter ist besonders beliebt, da er einen natürlichen Schatteneffekt erzeugt. Im Vergleich zum traditionellen box-shadow folgt der Filter-Schatten besser der Transparenz eines Bildes.

Tipps zur Verwendung von Filtern

Filter sind leistungsstarke Werkzeuge, aber man muss auf Performance und Benutzererfahrung achten.

• Vermeide die Kombination von zu vielen Filtern, da dies die Seite verlangsamen kann.
• Verwende Filter in Hover-Effekten, um visuelle Hervorhebungen zu schaffen.
• Teste die Effekte in verschiedenen Browsern, da Unterschiede auftreten können.