Filter per CSS, Filter per SVG
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>