b.olzplatz für e.learning, me.diensachen und o.nlinekram

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

Darüber hinaus schauen wir uns

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:

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- und drop-shadow:

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

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 andere Objekte anwenden

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

Klicke auf den Button "Inhalt laden", um den externen Inhalt von Google Maps nachzuladen. Damit stimmst Du den Datenschutzhinweisen von Google Maps zu. Diese findest Du in meiner Datenschutzerklärung im Abschnitt 2.5 verlinkt.
Inhalt laden

PHA+PGlmcmFtZSBjbGFzcz0iZmlsdGVyMTUiIHN0eWxlPSJib3JkZXI6IDA7IiBzcmM9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vbWFwcy9lbWJlZD9wYj0hMW0xNCExbTEyITFtMyExZDMyMTEwMzcyLjEyNjYxOTE4MyEyZDIyLjE4NzkxNDQ4MTI0OTk5NCEzZDEwLjc1NTgwNjI0OTA4NDcwNSEybTMhMWYwITJmMCEzZjAhM20yITFpMTAyNCEyaTc2OCE0ZjEzLjEhNWUwITNtMiExc2RlITJzZGUhNHYxNDQwMDY2OTE4NDMwIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

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

Klicke auf den Button "Inhalt laden", um den externen Inhalt von Vimeo nachzuladen. Damit stimmst Du den Datenschutzhinweisen von Vimeo zu. Diese findest Du in meiner Datenschutzerklärung im Abschnitt 2.5 verlinkt.
Inhalt laden

PGlmcmFtZSBzcmM9Imh0dHBzOi8vcGxheWVyLnZpbWVvLmNvbS92aWRlby8yNDQ5MjQ4NSIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIyMjUiIGZyYW1lYm9yZGVyPSIwIiBhbGxvd2Z1bGxzY3JlZW49ImFsbG93ZnVsbHNjcmVlbiI+PC9pZnJhbWU+PC9wPg==

Weichgezeichnet:

Klicke auf den Button "Inhalt laden", um den externen Inhalt von Vimeo nachzuladen. Damit stimmst Du den Datenschutzhinweisen von Vimeo zu. Diese findest Du in meiner Datenschutzerklärung im Abschnitt 2.5 verlinkt.
Inhalt laden

PGlmcmFtZSBjbGFzcz0iZmlsdGVyMTYiIHNyYz0iaHR0cHM6Ly9wbGF5ZXIudmltZW8uY29tL3ZpZGVvLzI0NDkyNDg1IiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIyNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

Umgekehrte Farben:

Klicke auf den Button "Inhalt laden", um den externen Inhalt von Vimeo nachzuladen. Damit stimmst Du den Datenschutzhinweisen von Vimeo zu. Diese findest Du in meiner Datenschutzerklärung im Abschnitt 2.5 verlinkt.
Inhalt laden

PGlmcmFtZSBjbGFzcz0iZmlsdGVyMTciIHNyYz0iaHR0cHM6Ly9wbGF5ZXIudmltZW8uY29tL3ZpZGVvLzI0NDkyNDg1IiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjIyNSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj0iYWxsb3dmdWxsc2NyZWVuIj48L2lmcmFtZT48L3A+

Schreibe einen Kommentar

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

Zustimmung zur Datenverarbeitung

Einstellungen zu Cookies

Bitte treffe eine Auswahl. Weitere Informationen zu den Auswirkungen Deiner Auswahl findest Du unter Hilfe, in der Datenschutzerklärung und im Impressum.

Treffe bitte eine Auswahl um fortzufahren.

Deine Auswahl wurde gespeichert!

Weitere Informationen

Erläuterung

Um fortfahren zu können, musst Du eine Cookie-Auswahl treffen. Bitte wähle zwischen

  • Alle Cookies zulassen:
    Alle Cookies dieser Seite ("First-Party-Cookies") sowie z.B. Tracking- und Analyse-Cookies, auch von Drittanbietern ("Third-Party-Cookies") sind zugelassen und können auf Deinem Endgerät gespeichert werden.
  • Nur absolut notwendige Cookies zulassen:
    Es werden keine Cookies gesetzt, es sei denn, es handelt sich um technisch notwendige Cookies.

Details zu Cookies und die Option, Deine Einstellungen nachträglich zu ändern gibt es in der Datenschutzerklärung. Die Anbieterkennzeichnung findest Du im Impressum

Zurück zur Auswahl