SVG/Tutorials/Filter/Anwendung in CSS
Text-Info
-
20min
- leicht
- CSS
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 Mark-up.
Deshalb bietet die gleichnamige CSS-Eigenschaft feststehende Filterfunktionen, die mit Namen versehen sind. Diese sind zwar nicht besonders leistungsfähig, 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.
Inhaltsverzeichnis
CSS-Eigenschaft filter[Bearbeiten]
Die filter-Eigenschaft stellt Effekte wie Unschärfe oder Farbverschiebungen zur Verfügung.
- Browserunterstützung
- caniuse.com
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[Bearbeiten]
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);
}
Der Weichzeichner-Effekt mischt die Farbe aller Pixel um das auszugebende Pixel. Wenn Sie dem Filter-Radius einen Wert von 2 geben, werden jeweils 2 Pixel in jede Richtung in die Berechnung mit einbezogen. Bei größeren Werten potenziert sich so die benötigte Berechnung (bei einer Verdoppelung sind 4x so viele Pixel betroffen), sodass die gesamte Darstellung der Seite verzögert wird.
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[Bearbeiten]
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);
}
Kontrast[Bearbeiten]
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[Bearbeiten]
Der drop-shadow()-Filter erzeugt einen Schlagschatten. Damit ähnelt er der bekannteren box-shadow-Eigenschaft.
Folgende Angaben sind möglich:
offset-x,offset-y: Diese benötigten Werte bestimmen den Versatz. Negative Werte verschieben den Schatten nach oben und links.
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.
blur-radius: Dieser optionale Wert regelt die Größe der Unschärfe. Standardwert ist 0 für eine scharfe Kante; ein höherer Wert lässt den Schatten größer und unschärfer werden, negative Werte sind nicht erlaubt.spread-radius: Dieser optionale Wert erweitert den Schatten, negative Werte verkleinern ihn (Beim Standardwert 0 ist der Schatten so groß wie das Element). Die webkit-Browser ignorieren diesen 4. Wert!color: Farbangabe; Dieser Wert ist einerseits optional, andererseits erzeugen die webkit-Browser dann einen transparenten Schatten.
.scharf {
filter: drop-shadow(10px 10px 0 black);
}
.weich {
filter: drop-shadow(10px 10px 10px black);
}
.weicher {
filter: drop-shadow(20px 20px 20px gray);
}
Graustufen[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
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);
}
Deckkraft[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
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[Bearbeiten]
Durch die Kombination mit CSS-animation können Sie interessante Effekte erzielen.
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);
}
}
Referenz zu einem SVG <filter> Element[Bearbeiten]
Anstelle der vordefinierten CSS-Filter können Sie auch komplexere SVG-Filter einbinden.
img {
filter: url('#KantenErkennung');
}
<main>
<figure>
<img src="Lauf-3.jpg" width="450" height="450" alt="Lauf" >
<figcaption>Einbindung von SVG-Filter</figcaption>
</figure>
</main>
<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>
KantenErkennung. Dieser SVG-Filter wird in einem SVG-Fragment am Ende des Seiteninhalts in das HTML-Dokument integriert.
Wenn Sie mehr über diese Burg erfahren wollen, stöbern Sie doch durch unsere SVG-Doku.