Chromium: Bildmanipulation mit CSS-Filtern
Als erste Browser setzen Googles Chromium und Chrome die Filter der Cascading Stylesheets um, mit denen sich die Darstellung von Bildern modifizieren lässt.
- Henning Behme
Ab der Version 19 bieten das Open-Source-Projekt Chromium sowie Chrome, der Browser aus dem Hause Google, zunächst exklusiv die Möglichkeit, mit CSS3-Filtern zu arbeiten. Ein Entwurf zu den Filtern hatte Ende März vorgelegen. Diese Woche hat Stephen White im Chromium Blog unter dem Titel Accelerated CSS Filters Landed in Chromium angekündigt, dass Chromium/Chrome die oft nur einzeiligen Regeln (siehe unten) in Stylesheets unterstützt.
In der Spezifikation vorgesehen sind die Filterfunktionen grayscale(), sepia(), saturate(), hue-rotate(), invert(), opacity(), brightness(), contrast(), blur() und drop-shadow(). Elemente, die modifiziert auf der Webseite dargestellt werden sollen, müssen über eine Klasse oder ID identifizierbar sein, sodass eine Stylesheet-Regel greifen kann:
<img src="flower.sm2.jpg"
alt="Original: Allium"/>
<img class="braun" src="flower.sm2.jpg"
alt="Mit Sepia modifizierter Zierlauch"/>
Die vier in der Abbildung erkennbaren Fotos zeigen das ursprüngliche Bild sowie drei weitere,, die die folgenden CSS-Regeln vor der Ausgabe modifizieren:
img.braun { -webkit-filter: contrast(200%) sepia(100%); }
img.verschwommen { -webkit-filter: contrast(200%) blur(3px); }
img.hue { -webkit-filter: contrast(200%) hue-rotate(90deg); }
Wie an den Regeln erkennbar ist, erfordern die oben genannten Funktionen unterschiedliche Parameter – und sie sind kombinierbar. Weitere Beispiele zeigt HTML5Rocks, eine interaktive Anwendung enthält die Seite Abstract Painting with CSS Filters. David Walsh hat auf seiner CSS-Filter-Seite die genannten Funktionen genutzt, um ebenfalls interaktiv zu zeigen, welche Effekte man mit ihnen erreichen kann.
Schon ein Blick auf die Herausgeber des Filterentwurfs (ein Adobe-, ein Apple- und ein Opera-Mitarbeiter) lässt vermuten, dass andere Browser bald nachziehen dürften. Microsoft hatte schon im Dezember 2011 dazu geraten, SVG statt VML und CSS statt DX-Filtern zu verwenden. Konsequent haben die Redmonder Anfang Juni DX-Filter aus der Preview für den Internet Explorer 10 (in der Internet-Zone) herausgenommen. (hb)
