CSS: Filter-Effekte

CSS-Filter sind Manipulationen an Texten oder Bildern ist eine „nicht-destruktive“ Veränderung. Das „Original“ wird also nicht verändert, sondern lediglich in der Ausgabe (hier dem Rendering des Browsers) nach entsprechenden Vorgaben angezeigt. Bilder und Texte können mit folgenden Filtern versehen werden (alphabetisch):

  • blur() – Weichzeichnen
  • brightness() – Helligkeit ändern
  • contrast() – Kontrast ändern
  • drop-shadow() – Schlagschatten
  • grayscale() – Graustufen
  • hue-rotate() – „Farbtonrotation“
  • invert() – Umkehren
  • opacity() – Deckkraft
  • saturate() – Sättigung
  • sepia() – Nun ja: Sepia 🙂

Darüber hinaus schauen wir uns

  • Kombinationen mehrerer Filter &
  • Filter auf anderen Objekten an.

Grundsätzlich funktioniert die Definition nach dem Strickmuster

selector {
  filter: [filtername](parameter);
}

Vorweg die Kompatibilitätsliste – damit die Internet Explorer-Nutzer nicht enttäuscht sind, wenn sie die Effekte nicht sehen:

Firefox Seit v.35 ohne Prefix.
Chrome Seit v.53 ohne Prefix.
Opera Seit v.40 ohne Prefix.
Safari Seit v.9.1 ohne Prefix.
Edge Seit v.13 ohne Prefix;
allerdings nicht ohne Einschränkungen im Detail.
Internet Explorer 🙁
Mobile Safari Seit iOS 9.3 ohne Prefix.
Android Browser Bis Android 4.4.4 mit Prefix -webkit-,
Danach ohne Prefix.

vgl. caniuse.com & shoudiprefix.com

So. Hier mal ein experimenteller Überflug über die Möglichkeiten. Das verwendete Bild ist übrigens Amanhecer no Hercules von Carlos Perez Couto, Quelle: Wikimedia Commons, Lizenz: CC-by-sa:

blur

Der Weichzeichner benötigt eine Radius-Angabe, in dessen Umgebung ein Pixel weichgezeichnet werden soll. Je mehr, desto weicher. Beispiel:

Die CSS-Definition sieht so aus:

.filter1 {
  filter: blur(5px);
}

brightness

Die Helligkeitseinstellung von 1 ist „original“, darunter ists dunkler, darüber heller. Beispiel:

CSS:

.filter2a {
  filter: brightness(0.5);
}
.filter2b {
  filter: brightness(3);
}

contrast

Hier ebenfalls: Der Wert 1 ist „original“, darunter ists konrastärmer, darüber kontrastreicher. Beispiel:

CSS:

.filter3a {
  filter: contrast(0.5);
}
.filter3b {
  filter: contrast(3);
}

drop-shadow

Der Schlagschatten erinnert stark an die Eigenschaft box-shadow. Auch die Angabe der Parameter nach dem Muster x, y, Weichzeichnung, Farbe ist gleich. Die Farbangabe kann über Farbname, Hex- oder RGB(A)-Angabe vorgenommen werden. Beispiel:

CSS:

.filter4 {
  filter: drop-shadow(2px 2px 2px black);
}

Allerdings erkennt der filter: drop-shadow(); den Alphakanal eines PNGs! Hier der Vergleich von box- (links) und drop-shadow (rechts):

.filter5a {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}
.filter5b {
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7));
}

grayscale

Der Parameter 1 steht für „100% Graustufen“, 0 bedeutet „voll bunt“. Der Unterschied zwischen Sättigung und Graustufen ist mir auch bei der Grafikbearbeitung nur dann klar, wenn die Sättigung über dem Originalwert liegt: Farbe kann man auch „übersättigen“, Graustufen gibt es nur zwischen schwarz-weiß und bunt.

CSS:

.filter6a {
  filter: grayscale(0.5);
}
.filter6b {
  filter: grayscale(1);
}

hue-rotate

Die Rotation des Farbtons (auf einem Farbkreis) wird in Grad von 0 bis 360 angegeben. Ein Wert von 180 entspricht also einer „Farben umkehren“-Funktion. Zum besseren Verständnis hier mal ein entsprechender Farbkreis:

Beispielhafte Farbtonverschiebung auf einem Farbkreis.
Beispielhafte Farbtonverschiebung auf einem Farbkreis.

Das Beispielbild hat in etwa eine „orange Grundstimmung“. Daher habe ich die 0° entsprechend in den orangenen Bereich des Farbkreises gesetzt. Analog verschiebt sich in den folgenden Beispielen die Grundfarbe zu grün (90°), blau (180°) und violett (270°). Je bunter ein Bild ist, desto krasser wirkt der Effekt, da ja jeder Bildpunkt auf dem Farbkreis verschoben wird. Man sieht das in Ansätzen an den Beispielen: In dem 90°-Bild werden blaue Wolken violett (eben 90° weiter verschoben), in dem 270°-Beispiel werden blaue Wolken grünlich.

CSS:

.filter7a {
  filter: hue-rotate(90deg);
}
.filter7b {
  filter: hue-rotate(180deg);
}
.filter7c {
  filter: hue-rotate(270deg);
}

invert

Der invert-Filter ist mehr als eine Farbtonverschiebung um 180°. Zwar mutet eine Umkehr aller Farben eines Bildes mit dem Parameter 1 an wie eine hue-rotate(180deg);, allerdings beinhaltet die Farbumkehr auch eine Umkehr aller Helligkeitswerte. Während bei der Farbtonverschiebung um 180° aus dunkelrot ein ebenso dunkles cyan wird, macht die Farbumkehr a) aus rot cyan und b) aus dunkel hell. Klingt komisch? ist aber so:

CSS:

.filter8 {
  filter: invert(1);
}

Eine teilweise Umkehrung (also 0 < invert-Parameter < 1) ist nur bedingt sinnvoll und führt selten zu hübschen Ergebnissen. Der Wert von 0.5 z.B. führt zu einer einheitlichen grauen Fläche (in etwa im Bereich rgb(128,128,128) bzw. #808080) – eigentlich logisch, wenn alle Helligkeiten und Farben umgekehrt werden und an diesem Punkt die Mitte des Umkehrungsprozesses liegt: Stellen Sie sich ein Schachbrett vor, bei dem die Felder die Farbe wechseln: Von schwarz zu weiß und umgekehrt. Genau in der Mitte dieses Prozesses sind alle Felder „gleich grau“.

opacity

Hmm. Der filter: opacity(x); hat exakt das gleiche Ergebnis wie die CSS-Eigenschaft opacity: x; – das ist einigermaßen unbeeindruckend:

CSS:

.filter9a {
  filter: opacity(0.5);
}
.filter9b {
  opacity: 0.5;
}

saturate

Die Original-Sättigung eines Bildes liegt bei 1. Werte darunter verringern, Werte darüber erhöhen die Sättigung:

CSS:

.filter10a {
  filter: saturate(0.5);
}
.filter10b {
  filter: saturate(3);
}

sepia

Auch bei den CSS-Filtern gibt es den beliebten (überstrapazierten?) Sepia-Effekt: 0 bedeutet „aus“, 1 bedeutet „100%“:

CSS:

.filter11a {
  filter: sepia(0.5);
}
.filter11b {
  filter: sepia(1);
}

Filterkombinationen

Oben beschriebene Filter lassen sich beliebig kombinieren und können zu erstaunlichen Effekten führen, z.B. zu einem Duplex-Effekt (Sepia + Farbverschiebung), einer echten Bildverbesserung (Helligkeit + Sättigung + Kontrast, alles in Maßen) oder auch zu psychedelischem Farb-Irrsinn (Farbverschiebung + Umkehren + Weichzeichnen + Kontrast) 🙂

Noch einmal: Das Original
Fotokorrektur mit Helligkeit (1.2), Sättigung (1.5) und Kontrast (0.8).
Duplex-Effekt: Kombination von Sepia (1) und Farbverschiebung (220°).
Sinnfreier Irrsinn: Farbverschiebung (90°), ein bischen umkehren (0.25), Kontrast (2.5) und Sättigung (2.5).

Filter auf anderen Objekten

Neben Bildern können CSS-Filter auch auf andere Objekte mehr oder weniger sinnvoll (und tlw. enorm ressourcenfressend) angewendet werden:

Beispiele für Texteffekte

Weichzeichner – Weichzeichner (filter: blur(5px);)
Schlagschatten – Schlagschatten (filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7));)
Deckkraft – Deckkraft (filter: opacity(0.5);)

iframe (Google Maps) mit Sepia-Effekt

iframe (Vimeo) mit Weichzeichner und „umgekehrt“

CSS-Filter lassen sich sogar auf Bewegtbilder (also z.B. die YouTube- oder Vimeo-iframes) anwenden, allerdings zwingt das meist den Browser in die Knie: Die Live-Berechnung eines Effektes für (mind.) 25 Videobildern pro Sekunde lässt das Video dann meist hakeln. Und spätestens hier stellt sich dann auch ein wenig die Sinnfrage: Warum sollte ich ein Video weichzeichnen wollen oder seine Farben umkehren?

Na, ja – weil es geht! 🙂

Original:

Weichgezeichnet:

Umgekehrte Farben:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.