SVG/Tutorials/Filter/Anwendung in CSS
-
20min
- leicht
SVG-Filter (die in den nächsten Kapiteln ausführlicher erklärt werden) bieten zwar viele Möglichkeiten, werden aber auch schnell komplex in der Anwendung und im Markup.
Deshalb wurden die üblichsten Filter-Algorithmen in feststehende CSS-Funktionen implementiert, die mit Namen versehen sind. Diese sind zwar nicht ganz so leistungsfähig wie ihre SVG-Eltern, aber bequem und leicht verständlich und bieten einen einfachen Ansatz zum Erreichen gängiger Effekte, wie z. B. Weichzeichnen. Diese Filter können auch durch CSS-animations animiert werden.
Neu gibt es eine backdrop-filter-Eigenschaft, mit der diese Effekte auch auf den Hintergrund eines Elements ausgeführt werden können.
Inhaltsverzeichnis
filter
Die filter-Eigenschaft stellt Effekte wie Unschärfe oder Farbverschiebungen zur Verfügung.
Syntax
.gefiltert {
filter: <filter-function> [<filter-function>]* | <url> ]none
}
Folgende Werte sind möglich:
- Standardwert ist
none(kein Filter) - eine CSS-Funktion, die innerhalb der runden Klammern einen (oder mehrere durch Leerzeichen getrennte) Werte enthält. Es können mehrere Filter-Funktionen kombiniert werden.
- URI- Referenz zu einem SVG <filter> Element
filter-Eigenschaft, die mittlerweile missbilligt ist.Weichzeichner
Der blur()-Filter wendet einen Gaußschen Weichzeichner auf die Grafik (oder den Text) an.
Der Filter erfordert eine Längenangabe des Radius, erlaubt aber keine Prozentwerte.
.blur {
filter: blur(0.08em);
}
Auch der dropshadow-Filter verwendet den Weichzeichner, sodass Sie bei den Werten für
radius und spread die benötigte Rechenzeit berücksichtigen müssen.Helligkeit
Der brightness ()-Filter ändert die Helligkeit der Grafik.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 0 ergibt schwarz, 1 ist die normale Helligkeit, 2 doppelt so hell.
.dunkler {
filter: brightness(.5);
}
.heller {
filter: brightness(1.5);
}
.nochHeller {
filter: brightness(2.5);
}
Durch den brightness-Filter wird die Helligkeit verändert.
Wenn Sie mehr über diese Burg erfahren wollen, stöbern Sie doch durch unsere SVG-Doku.
Kontrast
Der contrast()-Filter regelt den Kontrast, das ist der Unterschied zwischen den dunkelsten und hellsten Farben.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 0 ergibt schwarz, 1 ist der normale Kontrast, ein höherer Wert erhöht den Unterschied zwischen den Farben weiter.
.weniger {
filter: contrast(.5);
}
.höher {
filter: contrast(1.5);
}
.nochHöher {
filter: contrast(2.5);
}
Schlagschatten
Der drop-shadow()-Filter erzeugt einen Schlagschatten mit Hilfe eines Gaußschen Unschärfefilters (feGaussianBlur-Element). Die nicht-transparenten Teile des Elements (genauer: der Alpha-Kanal des angezeigten Inhalts) werden einheitlich gefärbt und erhalten mit Hilfe der Gaußschen Unschärfe einen verschwommenen Rand. Das Ergebnis wird um einen Offset verschoben und (in der Z-Achse) hinter dem Element dargestellt. Damit ähnelt drop-shadow() der box-shadow-Eigenschaft, unterscheidet sich aber deutlich im Ergebnis. Der Unterschied zu <feGaussianBlur> ist, dass nur ein Wert für stdDeviation angegeben werden kann.
Die Funktion erwartet zwei Längenangaben als X-Offset und Y-Offset für den Schatten sowie optional eine dritte Längenangabe als Wert für die stdDeviation-Eigenschaft des Unschärfefilters. Die Defaults für alle 3 Längenangaben sind 0.
stdDeviation-Eigenschaft ist kein Radius. Gaußsche Unschärfe verwendet eine Normalverteilung (Gaußsche Glockenkurve), um zu bestimmen, wie stark sich ein bestimmter Bildpunkt auf seine Nachbarschaft auswirkt. Die Standardabweichung ist ein Parameter, der die Breite der Glockenkurve bestimmt und damit indirekt die Breite der Unschärfezone.Vor oder nach den Längenangaben kann ein Farbwert notiert werden, der die Farbe des Schattens angibt. Fehlt die Farbangabe, erhält der Schatten in den meisten Browsern die Vordergrundfarbe (color) des Elements, auch wenn die Filter Effects Spezifikation sagt, dass der Standardwert für die Farbe transparent sei.
.scharf {
filter: drop-shadow(10px 10px 0 black);
}
.weich {
filter: drop-shadow(10px 10px 10px black);
}
.weicher {
filter: drop-shadow(20px 20px 20px gray);
}
Wie Sie am Beispiel des unteren Bilds sehen, passt sich der Schatten den Umrissen des Flugzeugs an. Dies ist mit box-shadow nicht möglich.
glow-Animation
.svg-shadow {
animation: svg-shadow 2s infinite alternate;
}
@keyframes svg-shadow {
from {
filter: drop-shadow( 0 0 0 #fff) drop-shadow( 0 0 0 #e60073) drop-shadow( 0 0 0 #e60073);
}
to {
filter: drop-shadow( 0 0 20px #fff) drop-shadow( 0 0 25px #e60073) drop-shadow( 0 0 40px #e60073);
}
}
Graustufen
Der grayscale()-Filter wandelt das Bild in Graustufen um.
Der Filter erfordert eine Angabe eines Prozentwerts von 0-100% oder einer positiven Zahl von 0-1; ein Wert von 0 lässt das Bild unverändert, 1 ergibt grau, die Werte dazwischen reduzieren die Farbwerte entsprechend.
.angegraut {
filter: grayscale(0.5);
}
.angegrauter {
filter: grayscale(0.75);
}
.grau {
filter: grayscale(1);
}
Siehe auch:
- Schieberegler (der die Farbwerte eines Bildes stufenlos ändert)
Änderung des Farbtons
Der hue-rotate()-Filter wendet eine Farbtonrotation auf das Ursprungsbild an.
Der Filter erfordert eine Angabe eines Winkelmaßes (von 0-360deg) an, der die Gradzahl um den Farbkreis bestimmt, um den die Ursprungsfarben verschoben werden. Ein Wert von 0deg lässt das Bild unverändert.
.viertel {
filter: hue-rotate(90deg);
}
.halb {
filter: hue-rotate(180deg);
}
.dreiviertel {
filter: hue-rotate(270deg);
}
Farbumkehr
Der invert()-Filter kehrt die Farben des Ursprungsbilds um.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 0 lässt das Bild im Normalzustand; 1 ist komplett invertiert.
.wenig {
filter: invert(0.25);
}
.mehr {
filter: invert(0.75);
}
.nochmehr {
filter: invert(1);
}
Automatisch kontrastreiche Schriftfarbe
Man kann Text je nach Hintergrundhelligkeit schwarz oder weiß einfärben, ohne die Komponenten in HSL oder oklch() aufzulösen:
span {
color: var(--bgColor);
filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
mix-blend-mode: luminosity;
opacity: 0.95;
}
Dies wird um #AAAAAA herum schwarz. Stellen Sie die Helligkeit niedriger ein, wenn Sie wollen, dass es früher schwarz wird. Spielen Sie auch mit dem Kontrast herum, indem Sie niedrige und hohe Werte verwenden.[1]
Deckkraft
Der opacity()-Filter regelt die Deckkraft, oder vielmehr die Transparenz eines Bilds.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 1 lässt das Bild im Normalzustand; 0 ist komplett durchsichtig.
.wenig {
filter: opacity(0.75);
}
.mehr {
filter: opacity(0.5);
}
.nochmehr {
filter: opacity(0.25);
}
Sättigung
Der saturate()-Filter regelt die Farbsättigung eines Bildes.
Der Filter erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 1 lässt das Bild im Normalzustand; höhere Werte erhöhen die Sättigung.
.wenig {
filter: saturate(2);
}
.mehr {
filter: saturate(4);
}
.nochmehr {
filter: saturate(8);
}
Sepiatönung
Der sepia()-Filter konvertiert das Ursprungsbild in Sepiafarben, sodass es wie ein vergilbtes altes Schwarzweiß-Bild aussieht.
Der Filter erfordert eine Angabe eines Prozentwerts von 0-100% oder einer positiven Zahl von 0-1; ein Wert von 0 lässt das Bild unverändert, 1 ergibt eine sepia-Tönung, die Werte dazwischen reduzieren die Farbwerte entsprechend.
.wenig {
filter: sepia(0.33);
}
.mehr {
filter: sepia(0.66);
}
.nochmehr {
filter: sepia(1);
}
Animationen mit Filtern
Durch die Kombination mit CSS-animation können Sie interessante Effekte erziele:
img {
animation: filter-animation 5s infinite;
}
@keyframes filter-animation {
0% {
filter: sepia(0) saturate(2);
}
50% {
filter: sepia(1) saturate(8);
}
100% {
filter: sepia(0) saturate(2);
}
}
backdrop-filter
Die backdrop-filter-Eigenschaft wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf den Bereich hinter einem Element an. Da der Effekt auf alles hinter dem Element angewendet wird, muss das Element oder sein Hintergrund transparent oder teilweise transparent sein, um den Effekt zu sehen.
.stacked figcaption {
align-self: end;
align-self: end;
backdrop-filter: invert(30%);
color: #fea;
text-align: center;
}
In diesem Beispiel aus unserem Grid-Tutorial werden alle Kindelemente des figure-Elements übereinander gestapelt.
Die Figcaption wird mit align-self: end; nach unten positioniert und entsprechend dem Hintergrund hellgelb eingefärbt. Zusätzlich wurde der Hintergrund mit backdrop-filter etwas unscharf gestellt, damit die Bildunterschrift besser lesbar ist.
Frosted Glass-Effekt
<ref>Next-level frosted glass with backdrop-filter (joshwcomeau.com)<ref>
Referenz zu einem SVG <filter> Element
Anstelle der vordefinierten CSS-Filter können Sie auch komplexere SVG-Filter einbinden.
img {
filter: url('#KantenErkennung');
}
<figure>
<img src="Lauf-3.jpg" width="450" height="450" alt="Lauf" >
<figcaption>Einbindung von SVG-Filter</figcaption>
</figure>
<svg>
<defs>
<filter id="KantenErkennung">
<feConvolveMatrix
order="3"
preserveAlpha="true"
kernelMatrix="
-1 -1 -1
-1 8 -1
-1 -1 -1"
divisor="1.0"
bias="0.0"
/>
</filter>
</defs>
</svg>
Die CSS-Festlegung verweist auf einen Filter mit der id KantenErkennung. Dieser SVG-Filter wird in einem SVG-Fragment am Ende des Seiteninhalts in das HTML-Dokument integriert.
Das SVG-Fragment beinhaltet einen Definitionsabschitt mit einem feConvolveMatrix-Filter, der die Kanten der Farben deutlich zu Tage treten lässt.
Siehe auch
- Filter-Effekte mit SVG-Text
- Vermischen mit Blend-Modes
