Instagram-Effekte mit CSS

Was macht man, wenn man auf Bild für eine Website einen Filter legen möchte, zum Beispiel den Kontrast erhöhen? Wahrscheinlich Bild herunterladen, in Photoshop/Gimp bearbeiten und wieder hochladen. Mit CSS3 geht das ganze aber viel einfacher, es gibt jetzt Filter-Funktionen für Bilder.

Dazu habe ich mir einfach mal ein Beispielbild vom schönen Hannoveraner Rathaus genommen und demonstriere damit die Funktionen:

Hier kannst du nun die verschiedenen Filter drauflegen, die dabei alle dieselbe Syntax haben:

img { filter: function(argument); -webkit-filter: function(argument); }

Auch möglich: Mehrere Filter übereinander legen. Dazu musst du die Filter einfach nur mit einem Leerzeichen getrennt hintereinander angeben. Das ganze funktioniert aktuell mit Chrome, Opera und Safari, teilweise mit -webkit-Präfix. Um das ganze zu demonstrieren habe ich Screenshots der Bilder eingefügt, um es live auszuprobieren kommt noch ein jsFiddle dazu.

blur()

Der blur-Effekt sorgt für eine Unschärfe im gesamten Bild, nimmt als Argument eine Anzahl an Pixeln an (Im Beispiel 5px). Bietet sich vor allem für :hover-Effekte an. Live-Demo

grayscale()

Mittels grayscale kannst du deine Bilder ergrauen lassen. Auch dies bietet sich wieder gut für Hover-Effekte an. Erwartet werden Prozentwerte zwischen 0% und 100% (Im Beispiel 50%) oder Werte zwischen 0 und 1. Live-Demo

sepia()

Hiermit kannst du einen Sepia-Effekt auf die Bilder legen. Auch hier werden Werte zwischen 0 und 1 erwartet, in meinem Beispiel habe ich 0.8 verwendet. Live-Demo

Weitere Effekte

Es gibt noch einige weitere Effekte, die vorallem etwas an der Farbe ändern. Dazu gehören contrast(), hue-rotate(), invert() und saturate(), dazu kommen noch brightness(), dropshadow() und opacity(). Wenn du alle mal ausprobieren willst, empfehle ich dir dieses Tool.

Fazit

Die CSS-Filter sind eine gute Möglichkeit, einfache Effekte auf Bilder zu legen und bieten sich vorallem für :hover-Effekte an, da dies nicht per Photoshop erledigt werden kann. Übrigens kannst du auch eigene Filter definieren, wie hier beschrieben wird.

Facebook Twitter WhatsApp

von Florian Schmidt

Gründer von Netzleben. Studiert IT System Engineering am Hasso-Plattner-Institut in Potsdam. Kauft viel zu viel Technik online ein. Liebt Kekse.

Hinterlasse einen Kommentar

Kommentare

Joel

Hallo Florian,

netter Artikel :)
Ich würde jedoch auch noch erwähnen, welche Browser bisher unterstützt werden :)

Support: Chrome 18.0.976.0, Webkit nightly

Hierauf antworten

schmidtflo

Hey Joel, vielen Dank für dein Feedback!
Den Browsersupport habe ich in der Einleitung schon erwähnt.

Hierauf antworten