CSS/Eigenschaften/filter

Browserunterstützung
caniuse.com

Die Eigenschaft filter wendet Effekte wie Unschärfe oder Farbverschiebungen auf Elemente an

Erlaubte Werte

Funktionen:

• url(): Laden eines SVG-Filters
• blur(): wendet einen Gaußschen Weichzeichner auf die Grafik (oder den Text) an.
  erfordert eine Längenangabe des Radius, erlaubt aber keine Prozentwerte.
• brightness(): ändert die Helligkeit der Grafik.
  Prozentwerts oder einer positiven Zahl; ein Wert von 0 ergibt schwarz, 1 ist die normale Helligkeit, 2 doppelt so hell.
• contrast(): regelt den Kontrast, das ist der Unterschied zwischen den dunkelsten und hellsten Farben.
  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.
• drop-shadow(): 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.
• grayscale(): wandelt das Bild in Graustufen um.
  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.
• hue-rotate(): wendet eine Farbtonrotation auf das Ursprungsbild an.
  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.
• invert(): kehrt die Farben des Ursprungsbilds um.
  erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 0 lässt das Bild im Normalzustand; 1 ist komplett invertiert.
• opacity(): regelt die Deckkraft, oder vielmehr die Transparenz eines Bilds.
  erfordert eine Angabe eines Prozentwerts oder einer positiven Zahl; ein Wert von 1 lässt das Bild im Normalzustand; 0 ist komplett durchsichtig.
• saturate(): regelt die Farbsättigung eines Bildes
  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.
• sepia(): konvertiert das Ursprungsbild in Sepiafarben, so dass es wie ein altes Schwarzweiß-Bild aussieht
  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.

Vererbung steuernde Werte inherit, initial, unset und revert

Standardwert

none

anwendbar auf

grafische und Container-Elemente

Vererbung

ja

animierbar

nein

Beispiel

.sepia {
  filter: sepia(1);
  border: thin solid brown;
}
.spezial {
  filter: url(#f1);
}
</image>

Auf das 1. Bild wird der vordefinierte sepia()-Filter angewandt.
Das zweite Bild erhält mittels eines im SVG-Fragment festgelegten Filters mit der id f1 eine andere Darstellung.

Siehe auch

• SVG/Tutorials/Filter
  • SVG/Tutorials/Filter/Anwendung in CSS

Weblinks

• Spezifikation (W3C): Filter Property
• MDN: filter CSS property
• Details: caniuse.com