CSS: Filter-Effekte

Wie Photoshop, nur CSS :-)

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 kurz etwas zur Kompatibilität – 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.

1. 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);
}

2. brightness

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

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

3. contrast

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

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

4. 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:

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

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

PNG mit transparentem Alpha-Kanal, drop-shadow
PNG mit transparentem Alpha-Kanal, drop-shadow
.filter4b {
  box-shadow: 2px 2px 2px rgba(0,0,0,0.7);
}
.filter4c {
  filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.7));
}

5. 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.

.filter5a {
  filter: grayscale(0.5);
}
.filter5b {
  filter: grayscale(1);
}

6. 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:

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.

.filter6a {
  filter: hue-rotate(90deg);
}
.filter6b {
  filter: hue-rotate(180deg);
}
.filter6c {
  filter: hue-rotate(270deg);
}

7. 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:

.filter7 {
  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".

8. opacity

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

.filter8a {
  filter: opacity(0.5);
}
.filter8b {
  opacity: 0.5;
}

9. saturate

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

.filter9a {
  filter: saturate(0.5);
}
.filter9b {
  filter: saturate(3);
}

10. sepia

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

.filter10a {
  filter: sepia(0.5);
}
.filter10b {
  filter: sepia(1);
}

11. 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).
.filter11a {
  filter:brightness(1.2) saturate(1.5) contrast(0.8);
}
.filter11b {
  filter:sepia(1) hue-rotate(220deg);
}
.filter11c {
  filter:hue-rotate(90deg) invert(0.25) contrast(2.5) saturate(2.5);
}

Filterkombinationen werden "einfach" ohne Punkt und Komma hintereinander weggeschrieben.

12. Filter auf andere Objekte anwenden

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

12.1 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);)

12.2 iframes mit Weichzeichner und "umgekehrt"

CSS-Filter lassen sich sogar auf Bewegtbilder (also z.B. die YouTube- oder Vimeo-iframes) anwenden, allerdings zwingt das oft den Browser in die Knie: Die Live-Berechnung eines Effektes für (mind.) 25 Videobildern pro Sekunde lässt das Video dann etwas 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:

Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Weichgezeichnet:

Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Umgekehrte Farben:

Sie sehen gerade einen Platzhalterinhalt von Vimeo. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Schreibe einen Kommentar

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