CSS-Filter und SVG-Filter zur Bildbearbeitung

08.10.13, 10:41

Bildmanipulation im Web-Browser

Filtern ist in. Seit es Foto- und Bildverarbeitungs-Software gibt, sind nicht nur Grafik-Designer davon fasziniert, Bilder zu manipulieren und ihnen mit Hilfe von Kunstfiltern oder Verfremdungsfiltern eine neue Anmutung zu geben. Und seit das Handy die Fotografie erobert hat und man mit Apps wie Instagram Fotos digital rahmt oder Retroeffekte und andere fotografische Effekte auf sie anwendet, ist Filtern zum Volkssport geworden. Das eigentliche Ausgangsbild ist heutzutage nur noch das Rohmaterial, das man wie man möchte, immer wieder neu visuell interpretieren kann.

Filtern ohne Bildverarbeitungssoftware

Die nächste Stufe der Bildbearbeitung ist nun das automatisierte Filtern mittels Browser. Hier geht es nicht etwa um Bildbearbeitungs-Software, die im Browserfenster läuft, sondern um neue Programmiertechniken. Die Zielgruppe dafür sind nicht Designer, sondern Programmierer, die mit wenigen Handgriffen ein Bild oder alle Bilder einer Webseite hell/dunkel, positiv/negativ, unscharf oder monochrom stellen können, ohne dafür eine Bildbearbeitung wie Photoshop bemühen zu müssen.

Medienübergreifendes, automatisiertes Filtern über neue Programmiertechniken

Beispielsweise könnte ein Programmierer festlegen, dass alle hochgeladenen Bilder schwarz-weiß erscheinen, mit einem Schatten oder einer leichten Unschärfe versehen werden oder in Sepia erscheinen – und zwar unabhängig davon, ob das Ausgangsbildmaterial schwarz-weiß oder farbig ist. Wenn man eine Bildergalerie von mehreren Hundert oder Tausend Fotos hätte, wäre das eine große Zeitersparnis. Die Filter können für das Look&Feel von Onlinespielen eingesetzt werden und lassen sich grundsätzlich sogar auf Video anwenden.

Programmiersprachen CSS3 und SVG für dreidimensionale Buttons

All das wird über die Webtechnologie CSS3 (Cascading Style Sheets) und das Grafik-Format SVG erreicht, das mit dem Adobe-Flash-Format verwandt ist. Die Filter, um die es geht, laufen im Hintergrund von Webseiten. Beispielsweise könnte bei einer Webseite, die farbige Bildelemente enthält, über die Änderung in einer CSS-Klasse allen Bildern ein Schlagschatten hinzugefügt werden und diese nur noch weichgezeichnet erscheinen. Oder man könnte allen Buttons, die vorher flach aussahen, eine dreidimensionale Anmutung geben.

CSS3 für Dokumentenstilvorlagen

CSS ist eine Programmiersprache speziell für Dokumenten-Stilvorlagen bei Webseiten. Die Änderung einer CSS-Klasse bewirkt Änderungen bei allen Elementen, auf die die entsprechende CSS-Programmierung Anwendung findet. Das heißt: weniger Arbeit und mehr Flexibilität. Filter müssen in ihrer Wirkung auf das Bild aber nicht getrennt und unabhängig voneinander existieren, sondern können miteinander kombiniert werden. So lässt sich ein Bild gleichzeitig z.B. 30% unscharf stellen, aufhellen und mit einem Schatten versehen.

Browser-Filter für mehr visuellen Komfort und einfaches Programmieren

Ein anderes Beispiel: Eine Webseite besteht aus Fotogalerien. Die Bild-Thumbnails werden scharf dargestellt. Per Doppelklick vergrößert sich eines der Bilder im Vordergrund. Dabei könnte man über einen CSS-Filter gewährleisten, dass alle anderen Bilder im Hintergrund monochrom und unscharf erscheinen, damit sie vom Bild im Vordergrund nicht ablenken. Erst wenn das große Vordergrundbild wieder weggeklickt wird, erscheinen sie wieder scharf und farbig. Zudem könnte das jeweils groß dargestellte Bild den vollen Tonwertumfang haben, während alle kleineren Bilddarstellungen leicht kontrastreicher und geschärft angezeigt werden, damit trotz der Datenreduktion durch die Verkleinerung die wesentliche Bildinformation auf den ersten Blick gut erfassbar bleibt.

Flexibles Layouten von Webseiten mit CSS

Dazu muss man wissen, dass die Grafik-Programmiersprache SVG von jeher zahlreiche sogar animierbare Filtermöglichkeiten bietet. CSS hat das flexible Layouten in die Webseiten eingebracht. Vor dem aktuellen CSS3 zeigten sich seine Stärken z.B. bei der Tabellengestaltung und dass all das exakter und einfacher umzusetzen war, was der Designer sich vorgestellt hatte. Mit CSS3 sind die Möglichkeiten gerade im Detail erweitert worden: Runde Ecken, Verläufe, Transparenzen, Schatten oder serverseitig einbettbare Schriftarten sind nun möglich und die gestalterischen Einschränkungen für den Designer geringer geworden. Die Kombination von CSS3 und SVG mit ihren Filtermöglichkeiten wurde vom W3C-Gremium, das Standards für das Web definiert, mit aufgenommen. Bald werden alle Browser die Funktionalität komplett unterstützen. Zur Zukunft der Webseitendarstellung wird es dann auch gehören, dass man Bilder – als wären sie aus Papier – dreidimensional verformen kann, inklusive aller Schattierungen. Das ist hier zu sehen. Adobe hat eine experimentelle Seite aufgesetzt, anhand derer man die verschiedenen Filtereffekte ausprobieren kann.

Kommentar hinzufügen

Mit der Nutzung dieses Formulars erklärst du dich mit der Speicherung und Verarbeitung deiner Daten durch diese Website einverstanden.