Design

Einfache CSS-Filter-Effekte für Hintergrundbilder

Hintergrundbilder, die man zur optischen Unterscheidung von einzelnen Seiten benutzt, sind nichts neues. Mich stört jedoch meist, wenn ich mehrere Grafiken einbinden muss, da jede Seite ihre eigene Gestaltung erhalten soll.
Da lädt der Besucher dann für jede Seite ein neues Bild – so kommen in der Summe mehrere Hundert KB zusammen. Besonders ärgerlich ist das Nutzen von einem Bild mit verschiedenen Farben/Nuancen.

Da helfen CSS Filter Effects
Diese bieten per CSS gute Möglichkeiten, Elemente direkt im Browser zu verändern. Das wirkt sich natürlich auch auf Hintergrundbilder aus, da der Filtereffekt auf dem gesamten Element greift.
Aktuell verfügbar und für unsere Zwecke interessant sind folgende Effekte:

  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue-rotate
  • invert
  • opacity
  • sepia

Welcher Browser das unterstützt, steht hier: Can I use CSS Filter Effects?
Ratsam ist es die Webkit-Browser noch ein wenig anzustubsen, also das -webkit-Präfix zu verwenden.

In meinem Fall hatte ich ein Hintergrundbild, das eigentlich auf allen Seiten zum Einsatz kommt, nur eben im Pressebereich sollte es andersfarbig sein. Am besten in Schwarz-Weiß bzw. Graustufen. Das geht mit dem CSS-Filter grayscale().

.grau {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

Original:
mein bereits im Photoshop eingefärbtes Bild
2014-07-31-css-filter-original

Ergebnis:
in Graustufen konvertiert
2014-07-31-css-filter-grayscale

mit Sepia-Filter sepia(0.7)
2014-07-31-css-filter-sepia

Man kann auch mehrere Filter gemeinsam benutzen, man muss sie nur mit Leerzeichen getrennt verwenden:

.aufregend {
  filter: blur(20px) grayscale(20%);
}

So lassen sich in modernen Browsern einfach und schnell schöne Effekte erzeugen, die auch noch Ladezeit sparen.

Kategorie: Design

von

Hallo, ich bin Nadja und arbeite als freie Webdesignerin in Berlin. Seit den 2000er-Jahren ist das Internet mein berufliches Zuhause, hier im cne _LOG schreibe ich erst seit Anfang 2006 zu den Themen Webdesign, Webstandards und vor allem auch Wordpress.