Schönen guten Abend und willkommen (zurück)! Auf Prosa folgt Technik und deshalb läuten wir heute ein weiteres Workaround ein, mit dem ihr eure Bilder ziemlich elegant via CSS-Filter ziemlich elegant und simpel verändern und verfremden könnt, beispielsweise um hübsche Hover-Effekte zu generieren, wenn der Besucher mit der Maus über das Bild fährt.
Eigentlich sollte das hier ein kurzer knapper und präziser Artikel werden, in dem ich euch zeige, wie man Bilder schwarz-weiß oder vielleicht noch sepia-farben erscheinen lässt und gut wäre gewesen, aber da es noch massig weitere CSS-Filter gibt, wollte ich die natürlich nicht vernachlässigen, weshalb dann doch wieder alles länger geworden ist.
Im Grunde ist die ganze Filtergeschichte auch ein alter Hut und man findet einiges zum Thema im Netz, aber ich wende mich ja auch bewusst an Anfänger und interessierte Laien, bin ich ja schließlich selber auch kein Webdesign-Crack oder HTML-/CSS-Profi, versuche mich also mal wieder dadurch abzuheben, alles hoffentlich verständlich und nachvollziehbar zu erklären, so dass ihr die Beispiele im Handumdrehen adaptieren könnt.
Allerdings gilt es zu beachten, dass derzeit nur Webkit-Browser, also Chrome, Opera und Safari, die CSS-Filter unterstützen, weshalb ihr vor der schwierigen Entscheidung steht, entweder euren CSS-Code rank und schlank halten zu wollen und nur mit dem webkit-Präfix zu arbeiten oder auf Zukunftstauglichkeit zu hoffen und einfach mal die komplette Bandbreite berücksichtigen wollt, auch wenn es derzeit keine Auswirkungen hat (ich gehe da später noch mal genauer drauf ein).
Das bedeutet natürlich auch, dass mancher eure tollen neuen Effekte gar nicht sehen kann, wenn er mit dem „falschen“ (oder einem veralteten) Browser eure Website oder euer Blog besucht, doch kann man ja nicht immer Rücksicht auf alle nehmen, zumal die Filtereffekte sicherlich nicht kriegsentscheidend sind, aber nett als zusätzliches optisches Highlight.
Welche CSS-Filter zur Auswahl stehen:
Greyscale
Der Klassiker und Anstoß für diesen Artikel: Bilder schwarzweiß machen, ausgrauen, grauskalieren. Für die volle Dröhnung einfach 100% als Wert angeben, für überhaupt keinen Effekt 0%, aber dann kann man es ja auch gleich lassen, nicht wahr!? 😉
Also flugs folgende CSS-Klasse (in der style.css) definieren…
img.schwarzweiss {
-webkit-filter: grayscale(100%);
}
…und folgendermaßen dem gewünschten Bild (im Artikel, auf der Seite, wo auch immer) hinzufügen:
<img class="schwarzweiss" src=... usw. usf.
Fertig! Wer das Bild aber nicht immer schwarzweiß haben will, sondern eben beispielsweise nur, wenn man mit der Maus drüberfährt, ändert die CSS-Klasse einfach wie folgt ab und ergänzt ein simples :hover:
img.schwarzweiss:hover {
-webkit-filter: grayscale(100%);
}
Ein Praxisbeispiel gefällig? Here we go!
Sepia
Die gute Nachricht direkt zum Start: Wer Greyscale verstanden hat, hat Sepia quasi schon gemeistert, denn der beliebte Vintage-Effekt funktioniert nach demselben Schema und wird gänzlich analog in die style.css implementiert:
img.sepia {
-webkit-filter: sepia(100%);
}
Sieht so aus:
Saturate
Mit Saturate lassen sich im Grunde ähnliche Effekte wie mit Greyscale erzielen, hier aber auch in die andere Richtung, denn es bezeichnet die Farbsättigung, so dass hier ein Wert von 100% für den Ursprungszustand steht, 0% demnach ein gänzlich farbentsättigtes Bild zeigt, wohingegen Werte über 100% die Farben kräftiger, knalliger und poppiger werden lässt. Der CSS-Code dazu:
img.saettigung {
-webkit-filter: saturate(300%);
}
Sieht so aus:
Hue-rotate
Auch hue-rotate dreht am Farbspektrum des Bildes, denn es bedient sich des Farbkreises, der von 0 bis 360° die RGB-Farben in der Reihenfolge rot, gelb, grün, blau, violett darstellt und färbt dementsprechend ein Bild in der jeweiligen Farbe ein. Zu beachten ist hierbei nur, dass die Werte in deg (=Degree, also Grad) angegeben werden und nicht in Prozent. Ihr könnt euch da gerne reinfuchsen, ich persönlich brauche es nicht, auch wenn es eine nette Spielerei ist. Der CSS-Code:
img.farbkreis {
-webkit-filter: hue-rotate(210deg);
}
Sieht so aus:
Invert
Invert, also Invertieren ist da schon wieder einfacher zu durchblicken, den das kann ja sogar Paint, nur dass man auch hier natürlich wieder nach Prozent abstufen kann, wobei der Effekt auch eigentlich nur bei 100% richtig gut ist, stülpen sich die Farben schließlich schrittweise um, so dass man bei 50% nichts weiter als graue Pampe erblickt, weil sich alle Farben quasi auf halber Strecke getroffen haben. Der CSS-Code:
img.invertiert {
-webkit-filter: invert(100%);
}
Sieht so aus:
Opacity
Opacity, zu Deutsch Opazität – wer hätte es gedacht – bezeichnet das Gegenteil von Transparenz, also mangelnde Durchsichtigkeit. Dementsprechend – und weil hier mal wieder 100% der Ausgangslage entspricht, kann man durch Verringern der Prozentzahl die Transparenz des Bildes erhöhen, also die Opazität verringern. Alle mitgekommen? Also je kleiner der Prozentwert, umso durchscheinender das Bild. Der CSS-Code:
img.opazitaet {
-webkit-filter: opacity(40%);
}
Sieht so aus:
Brightness
Ja, Brightness, endlich wieder gemeinhin bekannte Fahrwasser, denn Helligkeit sollte ja wohl selbsterklärend sein. 100% sind Standard, weniger ist dunkler, mehr ist höher. Toll! Ach ja, der CSS-Code:
img.helligkeit {
-webkit-filter: brightness(200%);
}
Sieht so aus:
Contrast
Contrast verhält sich exakt so wie auch Brightness, daher hier direkt der CSS-Code:
img.kontrast {
-webkit-filter: contrast(200%);
}
Sieht so aus:
Blur
Ja, ich denke da auch immer zuerst an die gleichnamige Band, aber der Blur-Effekt ist ein ziemlich aggressiver Weichzeichner, der ein Bild recht schnell verschwimmen lässt. Ausnahmsweise geht es hier einmal nicht um Prozent sondern um Pixel und dementsprechend sieht auch der CSS-Code aus:
img.verschwimmen {
-webkit-filter: blur(1px);
}
Sieht so aus:
Die kaskadierenden Style-Sheets der unbegrenzten Möglichkeiten:
Das mitunter schönste an der Sache mit den CSS-Filtern ist aber, dass man sie beliebig miteinander kombinieren kann, so dass es euch jederzeit freisteht, ein verschwommenes Sepia-Bild mit dreifachem Kontrast auf eure Seite zu stellen, das beim Überfahren mit der Maus rotstichig und scharf wird, während es die Hälfte seiner Opazität einbüßt und der Kontrast zurückgefahren wird. Ein Webdesigner würde mich für eine solche Idee sicher schlagen, aber ich hoffe allen ist klar, dass das nur ein Beispiel ist und sicher nichts, was es nachzumachen und umzusetzen gilt. Die erforderlichen Codeschnipsel stelle ich deshalb auch nicht zum Kopieren bereit! 😉
Die Sache mit der Kompatibilität:
Wie gesagt müsst ihr euch im Klaren darüber sein, dass die CSS-Filter nicht überall funktionieren beziehungsweise dargestellt werden, da sie bisher von nicht allzu vielen Browsern unterstützt werden. Jetzt könnt ihr – so ihr sie denn trotzdem verwenden wollt – auf die obigen CSS-Codes zurückgreifen und in Webkit-Browsern sieht die Sache rosig aus. So ihr denn der Meinung seid, es schade nicht, den Quelltext um einige weitere Zeilen anzureichern, um zukunftstauglich auf die anderen Browser vorbereitet zu sein, wenn diese das Feature respektive dessen Unterstützung nachrüsten, sieht der zu nutzende Code ungleich viel länger aus und zwar so (hier am Beispiel von Greyscale):
img.schwarzweiss {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
Das ist aber eine Entscheidung, die ich niemandem abnehmen kann und möchte und so erwähne ich es nur der Vollständigkeit halber. Zum Schluss sei noch angemerkt, dass meine Beispielbilder natürlich auch nur aussagekräftig sind, wenn ihr einen der Browser nutzt, der die Filter unterstützt, weil ich exakt die Codeschnipsel genutzt habe, die ich euch auch vorgeschlagen habe. Des Weiteren steht es euch natürlich frei, die jeweiligen CSS-Klassen zu benennen wie ihr wollt und unterschiedliche Filter miteinander zu kombinieren, um beispielsweise mit der Kombination aus Brightness und Contrast ausdrucksstärkere Bilder zu offerieren, ohne sie im Vorfeld aufwendig bearbeiten zu müssen und damit womöglich die Dateigröße aufzublähen.
Weiterführendes:
Wenn ihr jetzt noch ein wenig mit den Möglichkeiten rumprobieren wollt, kann ich euch den Filter Playground empfehlen, wo ihr mittels Schieberegler genau erkennen könnt, wie der Filter das bestehende Bild beeinflussen wird.
Das wars auch schon von meiner Seite für heute. Ich hoffe, ich konnte euch was Schönes zeigen und euch im besten Falle animieren, ein wenig am Design der eigenen Seite zu feilen (auch wenn vielleicht nicht alle Benutzer in den Genuss der Verbesserungen kommen werden) und freue mich wie immer über jedweden Kommentar, Lob, Kritik, Äußerungen und selbstverständlich auch, wenn ihr meine Workarounds weiterempfehlt! 😉
Sei der Erste, der diesen Artikel kommentiert!