CSS/Eigenschaften/Anzeige/filter

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Eigenschaft filter wendet Effekte wie Unschärfe oder Farbverschiebungen auf Elemente an[1]. Ursprünglich dazu geschaffen, pixelorientierte Manipulationen bei SVG/Filter-Vektorgrafiken zu erzielen, fanden sie ihren Weg zu CSS[2].

  • CSS 3.0
  • Chrome
  • Firefox
  • Edge
  • Opera
  • Safari

Details: caniuse.com

Beachten Sie: Ältere Versionen des Internet Explorers unterstützten eine nicht standardisierte filter-Eigenschaft, die mittlerweile missbilligt ist.

Inhaltsverzeichnis

[Bearbeiten] Angabe einer Funktion

Beispiel
.gefiltert {
  filter: <filter-function> [<filter-function>]* | none
}
<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></source}}
}}
}}
 
 
=== 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.
 
{{Beispiel|zeige=Beispiel: CSS3 filter-blur.html|
{{BeispielCode|<source lang="css">
.blur {
  -webkit-filter: blur(0.08em);  
  /* ^ Webkit browsers */
  filter: blur(0.08em);  
}
Beachten Sie: 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), so dass die gesamte Darstellung der Seite verzögert wird.
Auch der dropshadow-Filter verwendet den Weichzeichner, so dass Sie bei den Werten für radius und spread die benötigte Rechenzeit berücksichtigen müssen.
Empfehlung: Wenn Sie einen Weichzeichner verwenden, halten Sie die Werte für den Radius so gering wie möglich, um eine verzögerte Darstellung auf langsameren Geräten zu vermeiden.


[Bearbeiten] 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.

Beispiel ansehen …
.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.


[Bearbeiten] 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.

Beispiel ansehen …
.weniger {
  filter: contrast(.5);  
}
.höher {
  filter: contrast(1.5);  
}
.nochHöher {
  filter: contrast(2.5);  
}


[Bearbeiten] Schlagschatten

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.
Beispiel ansehen …
.scharf {
  filter: drop-shadow(10px 10px 0px black);  
}
.weich {
  filter: drop-shadow(10px 10px 10px black);  
}
.weicher {
  filter: drop-shadow(20px 20px 20px grey);  
}
Wie Sie am Beispiel des untereren Bilds sehen, passt sich der Schatten den Umrissen des Flugzeugs an. dies ist mit box-shadow nicht möglich.


[Bearbeiten] 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.

Beispiel ansehen …
.angegraut {
  filter: grayscale(0.5);  
}
.angegrauter {
  filter: grayscale(0.75);
}
.grau {
  filter: grayscale(1);  
}


[Bearbeiten] Ä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.

Beispiel ansehen …
.viertel {
  filter: hue-rotate(90deg);  
}
.halb {
  filter: hue-rotate(180deg);
}
.dreiviertel {
  filter: hue-rotate(270deg);  
}


[Bearbeiten] 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.

Beispiel ansehen …
.wenig {
  filter: invert(0.25);  
}
.mehr {
  filter: invert(0.75);
}
.nochmehr {
  filter: invert(1);  
}
Beachten Sie: Ein Wert von 0.5 lässt das gesamte Bild grau erscheinen.


[Bearbeiten] 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.

Beispiel ansehen …
.wenig {
  filter: opacity(0.75);  
}
.mehr {
  filter: opacity(0.5);
}
.nochmehr {
  filter: opacity(0.25);  
}


[Bearbeiten] 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.

Beispiel ansehen …
.wenig {
  filter: saturate(2);  
}
.mehr {
  filter: saturate(4);
}
.nochmehr {
  filter: saturate(8);  
}


[Bearbeiten] Sepiatönung

Der sepia()-Filter konvertiert das Ursprungsbild in Sepiafarben, so dass es wie ein 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.

Beispiel ansehen …
.wenig {
  filter: sepia(0.33);
}
.mehr {
  filter: sepia(0.66);
}
.nochmehr {
  filter: sepia(1);
}


[Bearbeiten] Animationen mit Filtern

Durch die Kombination mit CSS-animation können Sie interessante Effekte erzielen.

Beispiel ansehen …
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);
  }
}


[Bearbeiten] Referenz zu einem SVG <filter> Element:

Anstelle der vordefinierten CSS-Filter können Sie auch komplexere SVG-Filter einbinden.

  • CSS 3.0
  • Chrome
  • Firefox
  • Leer
  • Opera
  • Safari
Beispiel ansehen …
img { 
  -webkit-filter: url('#KantenErkennung');
  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>
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.


[Bearbeiten] Browser-Support

Achtung!

Die Eigenschaft filter ist derzeit (April 2015) nur in die Browser Firefox und IE Edge 13 implementiert, deshalb muss man proprietäre Eigenschaften verwenden.

für Android, Chrome, Opera und Safari:

  • -webkit-filter

Hinweis

Sie sollten bei der Definition solcher noch nicht umfassend verbreiteter Eigenschaften die herstellerspezifischen Angaben immer vor der standardisierten Form machen. Da später gemachte Angaben frühere überschreiben, ist so sichergestellt, dass die standardisierten Angaben von dem Zeitpunkt an, an dem sie unterstützt werden, auch verwendet werden.


[Bearbeiten] Weblinks

  1. http://www.w3.org/TR/filter-effects/
  2. http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html

Demo

Artikel

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Index
Mitmachen
Werkzeuge
Spenden
SELFHTML