Filter und faszinierende Effekte

Der Begriff Filter wird im Zusammenhang mit CSS3 für mehrere Dinge verwendet: für die proprietären Microsoft-Filter, für SVG-Filter und neuerdings auch für die neuen CSS-Filter. Sehen wir uns erst einmal die beiden älteren Filter an, bevor wir zu den neuen CSS-Filtern kommen. Das hilft einerseits, die verschiedenen Filter auseinanderzuhalten, und andererseits benötigen wir die älteren Filter ohnehin noch für Fallbacklösungen.

Microsoft Filter

Wenn von Filtern die Rede war, meinte man bis vor Kurzem noch die Microsoft-proprietären Filter, die häufig benutzt werden, um in älteren Internet-Explorer-Versionen CSS3-Eigenschaften nachzubilden. So kann man beispielsweise eine browserübergreifende Transparenz über folgende Angabe realisieren:

.transparent {
filter: alpha(opacity=50); /* alte
Syntax */
filter: progid:DXImageTransform.Micro
soft.Alpha(Opacity=50); /* Neuere Syntax */
-ms-filter: "progid:DXImageTransform.
Microsoft.Alpha(Opacity=50)"; /* Neueste Syntax */
opacity: 0.5;
}

opacity ist die offizielle CSS3-Eigenschaft, die im IE ab Version 9 implementiert ist. Für ältere IEs bewirkt der Alpha-Opacity-Filter, der im Beispiel in drei Syntaxvarianten angegeben ist, denselben Effekt.

Der Alpha-Opacity-Filter ist wie eine Reihe von anderen Filtern eine Erfindung von Microsoft und wurde mit dem Internet Explorer 4 (!) eingeführt. Im IE9 gelten Filterangaben als "deprecated" und ab IE10 werden sie nicht mehr unterstützt.

Für die Filterangaben gibt es die gezeigten Syntaxvarianten. Die neueste Variante ist die -ms-filter-Angabe, die zwar formal der Standardsyntax von CSS entspricht, ohne jedoch wirklich standardkonform zu sein.

Deshalb verwendet man häufig noch heute die filter-Angabe, die zudem den Vorteil hat, dass sie in allen IEs inklusive IE9 interpretiert wird. Aber bitte beachten Sie: Die neuen CSS-Filter, um die es in diesem Artikel geht, haben nichts mit den von Microsoft erfundenen Filtern zu tun.

Filter zum Zweiten

Außerdem existieren noch weitere Filter und das schon eine ganze Weile: In SVG, der Beschreibungssprache für skalierbare Vektorgrafiken, sind ebenfalls Filter definiert. In SVG erstellte Grafiken und Texte oder importierte Bilder können so mit Filtereffekten versehen werden.

Diese Filter - und das ist wichtig - können Sie aber auch in Ihren Stylesheets einsetzen und damit Bilder oder andere HTML-Elemente verändern oder manipulieren. Hierfür müssen Sie zuerst einmal den SVG-Filter in einem externen Dokument definieren. Folgender Code beschreibt eine Unschärfe.

<svg version="1.1" xmlns="https://www.
w3.org/2000/svg"><filter id="blur"><feGaussianBlur stdDeviation="5"/></filter></svg>

Eingeleitet wird der Filter durch das svg-Element mit einer Namensraumangabe. Dann gibt es ein filter-Element, das eine ID hat, über die Sie den Filter in Ihrem Stylesheet ansprechen können. Innerhalb des filter-Elements sind die einzelnen Filter angegeben - im Beispiel ist es der gaußsche Blur-Filter über das feGaussianBlur-Element. Bei diesem können Sie mit stdDeviation den Grad der Unschärfe festlegen. Je höher der Wert, desto größer die Unschärfe.

Das Beispieldokument ist einfach gehalten, es gibt nur ein filter-Element. Hier könnten aber auch mehrere stehen, die mit jeweils eindeutigen IDs gekennzeichnet werden müssten. Außerdem könnten Sie innerhalb eines filter-Elements mehrere unterschiedliche Filter angeben und so beispielsweise gleichzeitig eine Unschärfe und eine Veränderung bei den Farben definieren. Kommen wir zur Anwendung. Nehmen wir an, Sie haben diesen Filter im selben Verzeichnis wie Ihre CSS-Datei abgespeichert, dann können Sie über folgende Angabe den Filter aufrufen.

.unscharf {
filter: url(filter.svg#blur);
}

Sie sehen: Hinter der filter-Eigenschaft kommt das Schlüsselwort url, das in CSS zum Einbinden externer Dateien benutzt wird. In runden Klammern folgt der Pfad zur SVG-Datei, hinter einem # wird die id des Filters referenziert.

Der hier geschilderte Effekt funktioniert heute schon im Mozilla Firefox, und zwar - Achtung! - ohne die Angabe eines herstellerspezifischen Präfixes. Übrigens könnten Sie sich den zusätzlichen HTTP-Request durch die externe SVG mithilfe einer Data-URL-Angabe sparen.

Geht das nicht einfacher?

Es ist recht mühsam, wenn man sich mit SVG beschäftigen muss, um Filter in CSS einzusetzen. Abhilfe schaffen die neuen CSS-Filter, die Abkürzungen der SVG-Filterdefinitionen sind. Den gaußschen Unschärfe-Filter können Sie auch direkt innerhalb des Stylesheets anwenden:

.unscharf {
filter: blur(5px);
}

 Hinter dem neuen CSS-Schlüsselwort filter geben Sie den Filter an, dazu die Parameter in Klammern. Bei der Definition der CSS-Filter arbeiten die CSS- und die SVG-Arbeitsgruppe Hand in Hand. Zu jedem CSS-Filter findet sich in der Spezifikation die entsprechende SVG-Variante aufgeführt. So braucht das Team die CSS-Filter nicht neu zu erfinden, sondern kann auf die etablierten und in SVG vorhandenen Filter zurückgreifen.

Derzeit werden die neuen Filter bereits im Chrome ab Version 18 und in Safari ab 6 unterstützt. Damit das funktioniert, müssen Sie diese mit dem herstellerspezifischen Präfix schreiben.

.unscharf {
-webkit-filter: blur(5px);
}

Obwohl es noch Zukunftsmusik ist, können Sie vorsorglich schon die anderen Präfixe ergänzen, -o- für Opera, -ms- für den IE und -moz- für Firefox.

Filter ohne Ende

Neben dem gerade gezeigten Unschärfefilter gibt es eine Reihe weiterer Filter. Mit dem grayscale()-Filter entfernen Sie die Farben. Geben Sie in runden Klammern in Prozent an, wie stark der Filter angewandt werden soll. Mit 100% hat das entsprechende Element keine Farben mehr. Wenn Sie hingegen 0% angeben, so bleibt das Element unverändert im Ausgangszustand.

filter: grayscale(100%);

Über den sepia()-Filter lassen sich Effekte erzeugen, wie man sie von den bräunlichen Bildern der Fotografie-Frühzeit kennt. Auch hier geben Sie den Wirkungsgrad in Prozent an.

filter: sepia(100%);

Die Sättigung manipulieren Sie über den saturate()-Filter. Durch Werte von mehr als 100 Prozent erreichen Sie extreme Effekte:

filter: saturate(400%);

Über hue-rotate() verschieben Sie alle Farbtöne gleichzeitig. Hierfür müssen Sie sich die Farben als Farbkreis vorstellen. Ganz oben (0 Grad) ist Rot, rechts (60 Grad) Gelb; Grün ist bei 120 Grad, bei 180 Grad befindet sich Aquamarin, bei 240 Grad Blau und bei 300 Grad Magenta. Hinter hue-rotate geben Sie in Grad an, um wie viel die Farbtöne verschoben werden soll. Wenn Sie beispielsweise einen gelben Bereich haben, wird dieser durch hue-rotate(60deg) grün gefärbt. Diesen Filter können Sie mit saturate() kombinieren, weil die Farbverschiebungen bei kräftigen Farben mehr ins Auge fallen.

filter: saturate(200%) hue-
rotate(60deg)

 invert() kehrt die Farben um, mit invert(100%) haben Sie Farben wie auf einem Negativ.

filter: invert(100%);

Die Eigenschaft opacity kennen Sie von CSS3 - im Prinzip genauso funktioniert der opacity-Filter, nur dass Sie dabei üblicherweise Prozentwerte angeben:

filter: opacity(50%)

Schließlich können Sie auch die Helligkeit über brightness() und den Kontrast über contrast() variieren.

filter: contrast(50%);
filter: brightness(50%);

Außerdem ermöglicht Ihnen der drop-shadow-Filter einen Schlagschatten; dabei funktionieren die Parameter wie bei der CSS3-Eigenschaft box-shadow.

filter: drop-shadow(rgba(0,0,0,0.5)
0 5px 5px)

 

Hinter drop-shadow schreiben Sie die Farbe des Schattens und drei Längenangaben: Die erste legt die horizontale Verschiebung fest, die zweite die vertikale und die dritte bestimmt den Grad der Verschwommenheit. Noch mehr Möglichkeiten ergeben sich durch die benutzerdefinierten Filter, ursprünglich bekannt als CSS Shaders.

Dopplungen durch Filter

An verschiedenen Stellen gibt es Dopplungen: Wofür braucht man beispielsweise einen opacity-Filter, wenn die CSS3-Eigenschaft opacity das Gleiche macht? Als Vorteil für die Verwendung des opacity-Filters führt HTML5 Rocks auf, dass dieser hardwarebeschleunigt und deswegen performanceoptimiert ist.

Und der Dropshadow-Filter? Ein scheinbar ähnlicher Effekt lässt sich mit der Eigenschaft box-shadow erzeugen. Der im Folgenden definierte Filter:

-webkit-filter: drop-
shadow(rgba(0,0,0,0.5) 0 5px 5px);

würde in der box-shadow-Notation folgendermaßen aussehen:

box-shadow: rgba(0,0,0,0.5) 0 5px
5px;

 Der Unterschied zwischen den beiden Filtern wird dann ersichtlich, wenn Sie ein Element mit Textinhalt haben: Denn dann versieht der Dropshadow-Filter jeden einzelnen Buchstaben des Textes mit einem Schatten. box-shadow hingegen kann nur einen Schatten auf den Rand des gesamten Elements anwenden. box-shadow wirkt eben bei den Boxen, die Filter bearbeiten wirklich die bildlichen Inhalte.

Browserübergreifende Graufilter

Die Browserunterstützung für die neuen CSS-Filter lässt derzeit noch zu wünschen übrig. Bei den nichtunterstützenden Browsern können Sie aber nachbessern. Folgende Möglichkeiten stehen Ihnen zur Verfügung:

• Für Chrome ab Version 18 und Safari ab 6 verwenden Sie die CSS3-Filterangabe.
• Der IE7-9 erhält seine proprietären Filter.
• Im Firefox bessern Sie über SVG-Filter nach.

Außen vor bleiben derzeit ältere Webkit-Browser, Opera und IE10. Für Letztere schreiben wir aber trotzdem die Filter mit den herstellerspezifischen Präfixen, in der Hoffnung, dass diese bald implementiert werden. Beim Grayscale-Filter sehen die benötigten Angaben folgendermaßen aus:

.schwarzweiss {
-moz-filter: grayscale(1);
-o-filter: grayscale(1);
-ms-filter: grayscale(1);
-webkit-filter: grayscale(1); /*
Webkit */
filter: grayscale(1);
filter: url(meinefilter.svg#grayscale);
/* Firefox 3.5+ */
filter: gray; /* IE5+ - IE9 */
}

In der externen SVG-Datei ist der Filter für den Firefox definiert:

<filter id="grayscale"><feColorMatrix type="saturate"
values="0" /></filter>

Wenn Sie den Filter beim Hovern entfernen möchten, brauchen Sie den folgenden Code:

.schwarzweiss:hover {
-moz-filter: none;
-ms-filter: none;
-o-filter: none;
-webkit-filter: none;
filter: none;
}

Vorteil von Filtern

Vorteil von Filtern

Warum aber sollte man überhaupt CSS-Filter verwenden und nicht stattdessen das Bild direkt in einem Bildbearbeitungsprogramm bearbeiten? Schließlich muss ja der Client die Bildbearbeitung beim Einsatz von Filtern durchführen, was performanceintensiv ist.

Der CSS3-Filter-Entwurf beim W3C  Einstieg in Filter bei HTML5 Rocks Benutzerdefinierte Filter (ursprünglich CSS-Shaders) Unschärfe-Filter bei modalem Dialog: Filterlabor 

Dieser Einwand mag in vielen Fällen berechtigt sein, aber Filter ermöglichen es, dass der Effekt dynamisch abläuft. Beispielsweise kann ein Foto erst leicht unscharf sein und beim Hovern dann scharf werden. Zudem lassen sich Filter ja nicht nur bei Bildern definieren, sondern auch bei beliebigen anderen Elementen. Zum Beispiel kann man den Unschärfefilter bei einem modalen Dialog benutzen, um den Hintergrund nicht nur abzudunkeln, sondern auch unschärfer erscheinen zu lassen.

Das erzeugt eine zusätzliche Tiefe und lenkt die Aufmerksamkeit auf das Wesentliche. Wie so oft bei CSS3 liegt der Nutzen dieser Filter darin, dass sie sich so gut mit anderen CSS3-Features kombinieren lassen. So können Sie beispielsweise Filter mit Transitions oder Animations versehen und damit - um beim Beispiel mit dem unscharfen Foto zu bleiben - den Schärfungsvorgang langsam ablaufen lassen.

Chris Coyier von CSS Tricks sieht in den CSS-Filtern einen Trend für das Jahr 2013. Es wird sich zeigen, ob er mit seiner Prognose recht hat. Das Zeug dazu haben die Filter aber allemal. Und wenn die Geschwindigkeit, mit der neue CSS3-Features in den Browsern Einzug halten, weiter ungebrochen anhält, werden die Filter ebenfalls bald in weiteren Browsern zu finden sein.