Heute beschäftigen wir uns wieder mit einer Technologie, die ähnlich wie CSS Gradients eher unbekannt ist und dementsprechend kaum eingesetzt wird. Die Rede ist von CSS3 Filter-Effekten. Mit der filter-Eigenschaft lassen sich nämlich Bilder fast wie in Photoshop oder anderen Bildbearbeitungsprogrammen manipulieren.

Zuerst werde ich einen kurzen Überblick über die Möglichkeiten mit CSS Filtern geben und anschließend schauen wir uns die einzelnen Effekte nach der Reihe an. Zuletzt werfen wir dann noch einen Blick auf den Browser-Support und beschäftigen uns mit möglichen Anwendungsfällen von CSS3 Filtern.

CSS3 Filter: Effekte wie in Photoshop

Wie schon in der Einleitung erwähnt, handelt es sich bei den CSS3 Filtern um die CSS-Eigenschaft filter. Diese erlaubt uns, eine Reihe von Effekten, wie z.B. Unschärfe oder Farbverschiebungen, auf ein beliebiges Element anzuwenden, sodass ein Bild beispielsweise unscharf dargestellt wird. Wichtig zu wissen ist dabei, dass das Element noch vor der finalen Darstellung im Browser dem Filter entsprechend manipuliert wird. Der Endnutzer merkt von dem CSS Filter also praktisch gar nichts, schließlich könnte das Bild genauso vorher mit Photoshop bearbeitet worden sein.

Ein üblicher Anwendungsfall für CSS Filter ist die Manipulierung der Darstellungsweise eines Bildes, Hintergrundes oder Rahmens. Für das alles existieren verschiedene Funktionen, die zahlreiche vordefinierte Effekte ermöglichen. Wem das nicht ausreicht, der kann sich auch seinen eigenen Filter zusammenbasteln. Dies ist möglich, da die filter-Eigenschaft auch den Verweis auf einen Filter, der mit den sogenannten SVG Filter Elements erstellt wurde, erlaubt.

In 99.9% der Fälle sollte man dies aber eigentlich nicht benötigen, schließlich sind die vordefinierten Filter-Funktionen schon relativ umfangreich einsetzbar.

Syntax

Bevor wir uns den verschiedenen Funktionen widmen, müssen wir aber erstmal einen kurzen Blick auf die Syntax der filter-Eigenschaft werfen: 

filter: <filter-function> [<filter-function>]* | none

Der Standardwert ist logischerweise none und sagt einfach aus, dass kein Filter auf das Element angewendet werden soll. Möchte man nun einen Filter angeben, erfolgt dies im üblichen Stil von CSS-Funktionen, wie es z.B. auch bei der Eigenschaft transform zum Einsatz kommt. Des Weiteren ist es möglich, mehrere Filter gleichzeitig auf ein Element anzuwenden. Dazu trennt man die Funktionen einfach mit einem Leerzeichen. Auch dies ist nichts Besonderes und sollte jedem bekannt sein, der sich mit CSS ein wenig auskennt. Mehr dazu aber auch noch zu einem späteren Zeitpunkt, wenn wir die verschiedenen CSS Filter anwenden.

CSS Filter-Funktionen

Folgende Filter-Funktionen stehen in CSS zur Verfügung:

Um nun die CSS filter-Eigenschaft einzusetzen, gibt man die jeweilige Funktion mit dem benötigten Parameter in Klammern an. Sollte der übergebene Wert nicht dem standardisierten Format entsprechen, gibt die Funktion none zurück, was dazu führt, dass wiederum keinerlei Filter angewendet wird. Ansonsten kann man noch allgemein sagen, dass alle Filter-Funktionen, wenn sie denn Prozentwerte erwarten, genauso mit den passenden Dezimalzahlen nutzbar sind. Statt 30% könnte also z.B. auch 0.3 angegeben werden.

Nun, gut. Lasst uns mit den einzelnen Filter-Funktionen beginnen.

blur()

Die erste Filter-Funktion, die wir uns anschauen, ist blur() und ermöglicht es uns, einen sogenannten Gaußschen Weichzeichner auf das Element anzuwenden, sprich das Element unscharf oder verwaschen darzustellen, also Pixel zu verwischen.

Syntax
filter: blur(<length>)

Als einziger Parameter wird eine normale CSS-Längeneinheit übergeben. Prozentwerte sind nicht zulässig. Die Längeneinheit gibt dabei an, wie viele Pixel miteinander vermischt werden, weshalb ein größerer Wert selbstverständlich für eine stärkere Unschärfe sorgt.

Beispiel

Folgendes Beispiel erzeugt einen schon gar nicht mal so schwachen blur-Effekt: 

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

brightness()

Mit der Filter-Funktion brightness() lässt sich ein Element heller oder dunkler darstellen. Anders gesagt: brightness() ermöglicht die Anpassung der Helligkeit.

Syntax
filter: brightness([ <number> | <percentage> ])

Als Parameter wird ein Prozentwert übergeben, welcher, wie zuvor schon mal erwähnt, auch als Dezimalzahl angegeben werden kann. Der Parameter beeinflusst anschließend die Helligkeit des Elements, wobei 0 bzw. 0% komplett schwarz ist und 1 oder 100% der Ursprungswert ist. Möchte man die Helligkeit im Vergleich zum Ausgangszustand also erhöhen, werden Werte größer als 100% benötigt.

Beispiel
.brightness {
  filter: brightness(2);
}

contrast()

Die Filter-Funktion contrast() manipuliert den Kontrast eines Elements.

Syntax
filter: contrast([ <number> | <percentage> ])

Der Kontrast wird in Prozent angegeben. 100% ergibt, wie zuvor, keine Änderung. Ein Wert niedriger als 100% reduziert den Kontrast, während ein Wert über 100% für einen höheren Kontrast sorgt.

Achtung: Sowohl CSS-Tricks als auch das MDN scheinen hierbei einen kleinen Fehler eingebaut zu haben: Diese schreiben nämlich, dass Werte größer als 100% Ergebnisse mit weniger Kontrast erzeugen. Das stimmt nach meinen Informationen so nicht.

Beispiel
.contrast {
  filter: contrast(2.5);
}

drop-shadow()

Auch ein Schlagschatten lässt sich mit der CSS filter-Eigenschaft und der Funktion drop-shadow() erzeugen. Diese ähnelt der Eigenschaft box-shadow sehr, hat allerdings den Vorteil, dass manche Browser für CSS Filter Hardwarebeschleunigung unterstützen und ggf. einsetzen, sodass diese Funktion manchmal ein wenig schneller als box-shadow ist.

Syntax
filter: drop-shadow(<shadow>)

Die Funktion erwartet einen Parameter des Typs <shadow>, wobei das Keyword inset nicht erlaubt ist. Für die Syntax kann man sich gut an der Eigenschaft box-shadow orientieren, da diese die gleiche Syntax besitzt.

Beispiel

Da die Filter-Funktion drop-shadow() der box-shadow-Eigenschaft so ähnelt, lässt sich erstmal auch kein Unterschied erkennen. Es wird schlicht und ergreifend der übliche Schlagschatten erstellt, den man auch schon so kennt: 

.drop-shadow {
  filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.3));
}

Abgesehen von den potenziellen Performance-Vorteilen gibt es also keinen Grund, die Funktion statt box-shadow zu nutzen, richtig? Na ja, nicht ganz. Der drop-shadow()-Filter hat noch ein Ass im Ärmel.

Der Schlagschatten passt sich an die Form eines Bildes an. Das kann dann z.B. so aussehen:

See the Pen Drop shadow for Logo with CSS Filter by JR Cologne (@jr-cologne) on CodePen.

Mit box-shadow würde es hingegen folgendermaßen aussehen:

See the Pen Box shadow does not adapt to shape of image by JR Cologne (@jr-cologne) on CodePen.

grayscale()

Die grayscale()-Filter-Funktion stellt das Element in Graustufen dar, wodurch sich beispielsweise perfekt ein schwarz-weißes Bild erzeugen lässt.

Syntax
filter: grayscale([ <number> | <percentage> ])

Die Syntax verhält sich wieder genauso, wie bei den meisten Filtern. Durch einen Prozentwert wird angegeben, wie grau das Element praktisch wird. 0% entspricht dem Ausgangszustand und 100% erzeugt ein komplett graues Ergebnis. Ein Wert über 100% ist nicht vorgesehen.

Beispiel

Ein Bild, das komplett in schwarz-weiß dargestellt wird:

.grayscale {
  filter: grayscale(1);
}

hue-rotate()

Mit hue-rotate() lässt sich eine Rotation des Farbtons auf ein Element anwenden. Dabei werden die Farben eines Elements anhand einer Gradzahl um den Farbkreis gedreht, sodass sich die Farben je nach Winkel stark ändern.

Syntax
filter: hue-rotate(<angle>)

Wie schon angedeutet, erwartet die Funktion hue-rotate() eine Gradzahl, um die die Farben am Farbkreis verschoben werden sollen. 0deg steht dabei für keine Veränderung, während 360deg den Maximalwert darstellt.

Beispiel
.hue-rotate {
  filter: hue-rotate(80deg);
}

invert()

Die CSS Filter-Funktion invert() sorgt dafür, dass die Ursprungsfarben eines Elements invertiert, also umgedreht werden. Stellt man sich das Farbrad vor, würde also die entgegengesetzte Farbe genutzt werden.

Syntax
filter: invert([ <number> | <percentage> ])

Wie so häufig können wir mithilfe eines Prozentwertes wieder angeben, wie ausgeprägt der Effekt angewendet wird. 0% belässt alles beim Alten, 100% dreht die Farben vollständig um.

Beispiel
.invert {
  filter: invert(1);
}

opacity()

Der opacity()-Filter funktioniert exakt wie die gleichnamige CSS-Eigenschaft opacity und fügt einem Element Transparenz hinzu. Der Unterschied ist, genau wie bei drop-shadow() und box-shadow, dass der Filter in manchen Fällen performanter ist, da dieser hardwarebeschleunigt wird, während die normale CSS-Eigenschaft diesen Vorteil nicht vorweisen kann. Ansonsten besteht keinerlei Unterschied.

Syntax
filter: opacity([ <number> | <percentage> ])

Die Syntax stimmt mit einer kleinen Ausnahme mit der opacity-Eigenschaft überein: Die opacity-Eigenschaft erlaubt nur Dezimalzahlen, während die CSS-Filter-Funktion auch Prozentwerte zulässt. 0% sorgt für ein vollständig transparentes Element, wohingegen 100% für keinerlei Transparenz steht, was natürlich auch der Ausgangszustand ist.

Beispiel
.opacity {
  filter: opacity(0.5);
}

saturate()

Die Filter-Funktion saturate() ermöglicht die Sättigung eines Elements anzupassen.

Syntax
filter: saturate([ <number> | <percentage> ])

Auch saturate() erwartet einen Prozentwert. Dieser gibt an, wie groß die Sättigung ist. Werte unter 100% verringern die Sättigung, Werte über 100% sorgen für eine höhere Sättigung als vorher. Der Ausgangswert ist 100% und steht für die ursprüngliche Sättigung des Elements.

Beispiel
.saturate {
  filter: saturate(4);
}

sepia()

Der sepia()-Filter wandelt die Farben des Elements in Sepiafarben um. Mit diesem Filter lässt sich dementsprechend die berühmte Sepia-Färbung anwenden.

Syntax
filter: sepia([ <number> | <percentage> ])

Dreimal dürft ihr raten! Genau, die sepia()-Funktion erfordert einen Prozentwert, der die Stärke des Sepia-Effekts repräsentiert. 0% sorgt für keinerlei Veränderung und 100% entspricht einer voll ausgeprägten Sepia-Färbung.

Beispiel
.sepia {
  filter: sepia(1);
}

url()

Die url()-Funktion ermöglicht den Verweis auf einen Filter, der mit den sogenannten SVG Filter Elements erstellt wurde.

Syntax
filter: url(<url>)

Die Funktion erfordert die Angabe einer XML-Datei, welche einen SVG-Filter definiert, der dann auf das Element angewendet wird. Es kann auch ein Anker zu einem bestimmten Element hinterlegt werden.

Beispiel
.svg-filter {
  filter: url(resources.svg#c1);
}

Hinweis: Da ich selber nichts davon verstehe, habe ich diese Funktion nur der Vollständigkeit halber aufgeführt. Wie das genau funktioniert, müsst ihr euch dementsprechend leider selber erarbeiten.

Mehrere Filter gleichzeitig anwenden: CSS-Filter-Funktionen kombinieren

Wie bereits zu Beginn mal erwähnt, können die Filter-Funktionen beliebig kombiniert werden, um den gewünschten Effekt zu erzielen. Dies ist möglich, indem die Funktionen separiert durch ein Leerzeichen der filter-Eigenschaft zugewiesen werden.

Hier ist ein Beispiel, welches den Kontrast des Elements vergrößert und gleichzeitig die Farben um 180 Grad verschiebt: 

.hue-rotate-contrast {
  filter: hue-rotate(180deg) contrast(1.8);
}

CSS Filter animieren

Ja, du liest richtig. CSS Filter lassen sich animieren, was uns die Türen für einige lustige Dinge öffnet.

Die Animationen sind ganz normal mit Transitions bzw. Keyframe-Animationen umsetzbar. Dies ist eine simple Animation der Graustufen eines Elements: 

.grayscale {
  animation: animateGrayscale 3s linear infinite alternate;
}

@keyframes animateGrayscale {
  from {
  filter: none;
  }
  to {
  filter: grayscale(1);
  }
}

Mögliche Anwendungsfälle für CSS3 Filter

Nachdem wir uns nun die ganze Theorie angeeignet haben, stellt sich vor allen Dingen eine Frage: Was kann man nun damit anfangen?

Diese Frage ist meiner Meinung nach relativ leicht beantwortet: CSS Filter eignen sich hervorragend für jegliche Formen von Bildeffekten. Möchte man beispielsweise ein Hintergrundbild einer Website ein wenig auffälliger gestalten, aber nicht auf ein Video zurückgreifen, bieten sich CSS Filter an, um beispielsweise die Farben des Hintergrunds zu variieren.

Besonders gut kann dies dann auch mit Illustrationen aussehen.

Ebenfalls interessant sind Filter-Effekte als Hover-Effekt eines Bildes. So könnte sich z.B. die Farbe eines Bildes, das sich anklicken lässt, ändern, wenn man mit der Maus über das Bild fährt.

Um diese Ideen ein wenig zu veranschaulichen, habe ich einfach mal einen Pen erstellt, der die verschiedenen Möglichkeiten zum Einsatz von CSS3 Filtern ein wenig veranschaulicht. Seht selbst:

See the Pen Playing around with CSS3 Filters by JR Cologne (@jr-cologne) on CodePen.

Browser-Kompatibilität

Kommen wir nun zum immer wieder unschönen Thema Browser-Kompatibilität. Dieser sieht nämlich laut caniuse.com bei CSS Filtern auch nicht sonderlich überzeugend aus.

Auch wenn Chrome, Firefox, Safari und Opera durchweg einen guten Support anbieten, sieht das auf Mobilgeräten oder bei den Browsern von Microsoft schon deutlich schlechter aus.

Der Internet Explorer, der in den meisten Webprojekten zumindest noch in Version 11 unterstützt werden sollte, kann überhaupt nicht mit CSS Filter-Effekten werben, da er sie einfach nicht unterstützt. Besser sieht es dann schon mit dem Edge aus: Dieser unterstützt CSS Filter mit Ausnahme der url()-Filter-Funktion, die sowieso so gut wie keiner braucht.

Wenn es darum geht, aufgrund des Performance-Vorteils, die Filter-Funktionen opacity() und drop-shadow() den Eigenschaften opacity bzw. box-/text-shadow gegenüber vorzuziehen, kann ich nur eindeutig davon abraten. Das ergibt auch wegen der schlechteren Unterstützung der Browser keinen Sinn.

Fazit: Man kann sich noch nicht komplett auf die Unterstützung von CSS Filtern in allen gängigen Browsern verlassen, allerdings bedeutet dies nicht, dass CSS Filter noch nicht eingesetzt werden sollten.

In den meisten Fällen handelt es sich schließlich um keine kritischen Features, die einem Benutzer mit einem Browser ohne den Support von CSS Filter-Effekten einen erheblichen Nachteil verschaffen würden.

Fazit

Abschließend kann man sagen, dass CSS3 Filter in einigen Fällen unterschätzt werden und ruhig mehr eingesetzt werden könnten. Auch wenn der Browser-Support noch nicht ideal ist, kann man CSS Filter-Effekte ohne größere Bedenken verwenden.

Wer also das nächste Mal nach einem netten Hover-Effekt sucht oder ein Hintergrundbild hat, das noch ein wenig aufgepeppt werden soll, kann den Einsatz von CSS Filtern durchaus in Erwägung ziehen.

Weiterführende Links / Quellen