CSS Filter: von Grayscale bis Sepia

Filter wirken wie die Effektfilter der Bildbearbeitung, aber sie beeinflussen nur die Darstellung, das Original (gleich ob Text oder Bild) bleibt unangetastet.

Diese Art der Bildbearbeitung wird auch als nicht-destruktiv bezeichnet, weil sie das Original nicht verändern. Auch das kennen wir aus der Bildbearbeitung, z.B. bei Lightroom und Darktable.

Filter gibt es in drei Varianten: als CSS-Eigenschaft filter mit einfachen Werten wie grayscale und invert, die CSS-filter-Eigenschaft mit der URL eines SVG-Filters und zu guter Letzt SVG-Filter.

Die Syntax für CSS-Filter ist denkbar einfach.

elem.fx { 
   filter: grayscale(100%);
}

elem.fx { 
   filter: hue-rotate(45deg) brightness(130%);
}

Mehrere Filter werden nacheinander ohne Komma, nur durch ein Leerzeichen voneinander getrennt, in Reihe geschaltet.

Filter für alle Elemente

CSS-Filter wirken auf alle Elemente, auf Bilder, Text und Dekorationen wie Hintergrundbilder und CSS border, nicht aber z.B. auf border-image.

Einfach Alles

.textbox {
   filter: blur(5px) brightness(90%);
   transition: filter 1s;
}

CSS Filter lassen sich animieren.

.textbox.toggle { 
   filter: blur(0px) brightness(100%);
}

CSS Filter auf Fotos

Das Spielzeug für CSS Filter sind die Filter auf Bildern.

.imgfx { filter: none; }

Filtervariationen

none: Kein Filtereffekt
blur (px): Weichzeichnen
brightness (%): Helligkeit, heller mit Werten > 100%, dunkler mit Werten < 100%.
contrast (%): Kontrast, höherer Kontrast mit Werten > 100%, weniger Kontrast mit Werten < 100%.
grayscale(%): Graustufen
hue-rotate(deg): Farbverschiebung
invert(%): Umkehren, Negativ
opacity(%): Deckkraft
saturate(%): Sättigung
sepia(%): Sepia
url(): URL eines SVG-Filters
initial: Zurück zum voreingestellten Wert
drop-shadow(h-shadow v-shadow blur spread color): h-shadow: Zahl der Pixel für die horizontale Distanz des Schlagschattens. Negative Werte: Schlagschatten nach links
v-shadow: vertikale Verschiebung, negative Werte: Schlagschatten nach oben
blur: Grad der Weichzeichnung
spread: Vergrößern des Schlagschattens durch Streuung, angegeben in Pixel, weglassen, weil der Filter sonst von vielen Browsern nicht unterstützt wird.
color: Farbe des Schlagschattens

Drop Shadow Filter

.dropshadow {
   filter:drop-shadow(8px 8px 10px gray);
}

CSS Filter via URL und SVG

Anstelle der reinen CSS-Filter wirken auch Filter mit der URL einer SVG-Datei, die aus einem SVG-Filter besteht. Die kreative Spannbreite von SVG-Filtern ist schlicht unendlich, genauso unendlich ist ihre Komplexität.

Warte warte nur ein Weilchen – in einigen Browsern, vor allem Safari, kann es ganz schön lang dauern, bis der Filter angezeigt wird.

CSS und HTML

.hitze {
  filter: url('#hitze');
}

<img class="hitze" src="versace.jpg" width="600" height="384" alt="Foto mit SVG-Filter">

SVG-Filter

<svg height="100%" width="100%" viewBox="0 0 690 477" >
<defs>
<filter id="hitze" style="color-interpolation-filters:sRGB">
   <feGaussianBlur stdDeviation="3" result="result5" in="SourceGraphic"></feGaussianBlur>
   <feTurbulence baseFrequency="0.02" seed="0" result="result1" numOctaves="3" type="fractalNoise"></feTurbulence>
   <feDisplacementMap scale="30" yChannelSelector="G" in2="result1" result="result3" xChannelSelector="R" in="SourceGraphic"></feDisplacementMap>
   <feComposite operator="out" result="result4" in2="result1" in="result3"></feComposite>
   <feComposite in2="result4" k3="0.3" k2="1" k1="0.3" result="result6" operator="arithmetic"></feComposite>
   <feComposite operator="over" in2="result5" in="result6"></feComposite>
</filter>
</defs>

Der SVG-Filter kann direkt im Quelltext der Seite untergebracht werden, etwa am Fuß der Seite. SVG Filter erzeugen kein sichtbares Element, sondern werden nur auf ein Element angewendet.

Die Verbindung zum HTML-Element, dem Bild, wird durch den Verweis url('#hitze') im CSS hergestellt.

Browser-Unterstützung

CSS Filter werden von allen modernen Browsern (Microsoft ab MS Edge) unterstützt. Alte Versionen von Internet Explorer (IE10 und auch IE11!) sprechen auf CSS Filter nicht an.

Auch die Variante, den SVG-Filter inline ins HTML zu setzen und über die Referenz anzusprechen, wirkt nicht einmal in IE11.

Die zuverläßige Lösung sind SVG-Filter in einer SVG-Datei oder inline-SVG.

So gehts mit IE 10, IE11, Edge, Chrome, Safari, Firefox.

<svg viewBox="0 0 600 384" width="100%" height="100%">
   <filter id="hue" style="color-interpolation-filters:sRGB">
      <feColorMatrix values="180" type="hueRotate"/>
   </filter>
   <image xlink:href="versace.jpg" height="384" filter="url(#hue)" width="600" y="0" x="0"/>
</svg>

In ähnlicher Weise wie CSS filter lassen sich SVG-Filter in Serie schalten. Der erste Filter feColorMatrix erzeugt ein Graustufenbild, das dem zweiten Filter als Eingabe dient und zum Negativ konvertiert wird.

<svg viewBox="0 0 600 384" width="100%" height="100%">
   <filter id="invertgrayscale" style="color-interpolation-filters:sRGB" >
      <feColorMatrix values="0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0.8 0.4 -0.4 0 0 0 0 0 1 0 " result="grayscale"/>
      <feColorMatrix in="grayscale" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "/>
   </filter>
   <image xlink:href="versace.jpg" height="384" filter="url(#invertgrayscale)" width="600" y="0" x="0"/>
</svg>

CSS filter in SVG-Filter übersetzt