CSS-Filter
Geschrieben am: , aktualisiert:
An verschiedenen Stellen stößt CSS in Bereiche vor, die vorher Bildbearbeitungsprogrammen vorbehaltet waren. Man kann Bilder beschneiden mit clip-path, Bilder und andere Elemente über die Blendmodi mischen und es gibt die Filter, um Effekte wie Farbverschiebungen oder Unschärfe auf Bilder und andere Elemente anzuwenden. Um diese Filter geht es hier.
Vorweg: filter !=filter
Die hier beschriebenen Filter sind nicht zu verwechseln mit den proprietären Microsoft-Filtern. Die proprietären Microsoft-Filter hat man beispielsweise verwendet, um bestimmte CSS3-Effekte in älteren IEs nachzubilden. Die mangelnde Unterstützung im IE < 9 für die Eigenschaft opacity hat man etwa folgendermaßen nachgebessert:
filter: alpha(opacity=50); /* proprietäre IE-Filter */`Im Gegensatz dazu geht es bei den hier behandelten Filtern um eine CSS3-Eigenschaft, die in einem Working Draft des W3C beschrieben ist.
Filter anwenden
Die Anwendung von Filtern ist relativ gradlienig: Man schreibt die Eigenschaft filter und dahinter einen von mehreren Werten. Wenn man folgende Angaben auf ein farbiges Bild anwendet, wird es in Grautönen dargestellt:
filter: grayscale(100%);Die Eigenschaft filter ohne Präfix versteht der Firefox ab Version 35; Chrome ab 53, Safari ab 9.3. Frühere Chrome/Safari-Browser benötigen die Schreibweise mit dem -webkit-Präfix.
Alle möglichen Filter demonstriert das folgende Beispiel.
Und hier ist das Beispiel für die Filtertypen.
box-shadow und blur-Filter
Einen Schatten um Elemente kann man mit box-shadow erzeugen. Wofür gibt es denn dann noch den blur-Filter? Wenn man beide auf ein normales Bild anwendet, so kann man denselben Effekt erzielen.
.dropshadowfilter {
filter: drop-shadow(rgba(0,0,0,0.5) 0 8px 8px);
}
.boxshadow {
box-shadow: rgba(0,0,0,0.8) 0 8px 8px;
}Der Unterschied zwischen beiden wird deutlich, wenn man filter bzw. box-shadow auf andere Inhalte anwendet - etwa auf eine Box mit einem gepunkteten Rahmen und Text. Dann sieht man deutlich: Der filter erzeugt auch einen Schatten bei der Schrift und um jeden Rahmenpunkt; box-shadow hingegen zeichnet den Schatten nur drumherum.
