SVG/Tutorials/Filter/Anwendung in CSS

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Filter(Weitergeleitet von Saturate())
Wechseln zu: Navigation, Suche

Text-Info

Lesedauer

20min

Schwierigkeitsgrad
leicht
Vorausgesetztes Wissen
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.

CSS-Eigenschaft filter[Bearbeiten]

Die filter-Eigenschaft stellt Effekte wie Unschärfe oder Farbverschiebungen zur Verfügung.

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

Details: caniuse.com

Syntax

Beispiel
.gefiltert {
  filter: <filter-function> [<filter-function>]* |  <url> ]none
}

Folgende Werte sind möglich:

Beachten Sie: Ältere Versionen des Internet Explorers unterstützten eine nicht standardisierte 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.

Beispiel ansehen …
.blur {
  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), 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.
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.

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.

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.


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.

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

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.

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

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

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.


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.

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

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

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

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


Referenz zu einem SVG <filter> Element[Bearbeiten]

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

  • CSS 3.0
  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari
Beispiel ansehen …
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>
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.