Ausbreitung des Coronavirus führt zu immer mehr Tafel-Schließungen

Um 1,6 Millionen bedürftige Tafel-Nutzer:innen jetzt nicht allein zu lassen, ruft Tafel Deutschland e.V. zu Solidarität und Unterstützung auf. Sie wollen helfen? Informationen finden Sie unter tafel.de.

Coronacharityshop.png

Eine weitere Möglichkeit ist der Einkauf im CoronaCharityShop – alle Einnahmen gehen zu 100 % an die Tafeln. Herzlichen Dank für Ihre Unterstützung.

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}}}