CSS-Filter verändern die Darstellung eines Elements: Unschärfe, Graustufen, Helligkeit, Kontrast. Sie wirken auf alles, was darin liegt.
- CSS-Filter
Eigenschaft, die grafische Effekte auf ein Element und seinen gesamten Inhalt anwendet.
Beispiel: „Ein CSS-Filter wirkt auf alles, was im Element liegt, auch auf Text.“
Die gebräuchlichen
filter: grayscale(1);
filter: blur(8px);
filter: brightness(0.8) contrast(1.1);Mehrere Funktionen lassen sich hintereinanderschreiben und werden in dieser Reihenfolge angewendet. Verbreitet ist Graustufen für Logos, die erst beim Überfahren farbig werden, und Unschärfe hinter geöffneten Dialogen.
Was zu beachten ist
Ein Filter erzeugt einen eigenen Stapelkontext und beeinflusst damit, wie Z-Index wirkt. Außerdem kostet er Rechenzeit, besonders die Unschärfe über großen Flächen. Für Hintergründe hinter Dialogen ist backdrop-filter gedacht, das auf das wirkt, was dahinterliegt.