Instagram-Effekte mit CSS

Profilbild von Florian Schmidt
Vom 19. Oktober 2014

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.

Dieser Artikel wurde zuletzt vor über einem Jahr aktualisiert. Die Inhalte könnten inzwischen nicht mehr aktuell sein.

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.

  • # Webentwicklung
  • # CSS

Du suchst die Kommentare?

Keine Sorge, die sind nicht verloren! Es dauert aber noch eine Weile, bis sie wieder zu sehen sind und du neue Kommentare hinterlassen kannst.

Netzleben ist frisch von einer alten Kirby-Website auf eine neue, Statamic-basierte Website umgezogen. Leider ist das Plugin für Kommentare mit Statamic 3 noch nicht kompatibel.