Referenz:CSS/Eigenschaften/filter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
Eigenschaft filter CSS 3.0
Beschreibung endet Effekte wie Unschärfe oder Farbverschiebungen auf Elemente an
erlaubte Werte

Funktionen:

  • URI: 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.
default-Wert

none

anwendbar auf grafische und Container-Elemente (Unterschied Tag Element Attribut)
Vererbung ja
animierbar nein
Browsersupport
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Spezifikation W3c logo klein.gif Filter Property
Beispiel
.gefiltert {
  filter: <filter-function> [<filter-function>]* | none
}
Beachten Sie

{{{Hinweis}}}

Tipp

{{{Tipp}}}