Filter per CSS, Filter per SVG
Diese Art der Bildbearbeitung wird 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.
Meist stehen die Effektfilter im Rampenlicht, während filter:drop-shadow eher als Dublette des box-shadow übersehen wird. Dabei bringt der drop-shadow Freiheit für die Freisteller.
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 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.
Hier ist alles unscharf
.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.
.efx { filter: none; }
Drop Shadow – Schlagschatten mit CSS filter
Da gibt es doch noch den soliden zuverlässigen box-shadow in CSS? Bei Freistellern – Bildern ohne Hintergrund – liegt der Schatten um die Box des Elements und erzeugt einen reckigen Kasten.
Mit filter:drop-shadow hingegen entsteht der Schatten unter dem freigestellten Motiv.
.dropshadow {
filter:drop-shadow(-20px 20px 10px gray);
}
@media (min-width: 480px) {
.dropshadow {
filter:drop-shadow(-40px 40px 20px gray);
}
}
… … … … … … … … … … … …
<picture class="dropshadow">
<source media="(min-width: 480px)" srcset="fisch-980.webp">
<source media="(min-width: 300px)" srcset="fisch-480.webp">
<img loading="lazy" src="fisch-980.webp" alt="…" width="980" height="456">
</picture>
Auch wenn die Syntax von filter:drop-shadow fast dieselbe ist wie bei box-shadow und auch das Erscheinungsbild ähnlich wirken, gibt es einen Unterschied: CSS filter setzt hinter den Kulissen SVG-Filter ein.
Der drop-shadow unter den CSS-Filtern profitiert vom Dateiformat WebP, das freigestellte ausgeschnittene Motive deutlich sparsamer speichert als PNG.
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
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.
.hitze {
filter: url('#hitze');
}
<img class="hitze" src="versace.jpg" width="600" height="384" alt="Foto mit 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 den alten IE-Grufties und dem immergrünen Browsern.
<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>
