CSS: The Definitive Guide, 5. Auflage

Kapitel 20. Filter, Überblenden, Freistellen und Maskieren

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Mehrere spezielle Eigenschaften ermöglichen es den Autoren, das Aussehen von Elementen mit visuellen Filtern zu verändern, verschiedene Möglichkeiten festzulegen, wie Elemente mit dem, was sich dahinter befindet, optisch verschmelzen, und die Darstellung von Elementen zu verändern, indem Teile ein- und andere Teile ausgeblendet werden. Auch wenn dies wie unterschiedliche Konzepte erscheinen mag, haben sie alle eines gemeinsam: Sie ermöglichen es, Elemente auf eine Weise zu verändern, die vorher schwierig oder unmöglich war.

CSS-Filter

CSS bietet eine Möglichkeit, integrierte visuelle Filtereffekte sowie benutzerdefinierte Filter, die in der Seite oder in externen Dateien definiert wurden, mit Hilfe der Eigenschaft filter auf Elemente anzuwenden.

Filter

Werte	[ none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate() | url() ]#
Anfangswert	none
Gilt für	Alle Elemente (in SVG gilt das für alle Grafikelemente und alle Containerelemente außer dem Element <defs> )
Berechneter Wert	Wie erklärt
Vererbt	Nein
Animierbar	Ja

Die Wertesyntax erlaubt eine durch Leerzeichen getrennte Liste von Filterfunktionen, wobei jeder Filter nacheinander angewendet wird. So wird bei der Deklaration filter: opacity(0.5) blur(1px); ...