SVG/Tutorials/Filter/Anwendung in CSS

Aus SELFHTML-Wiki
< SVG‎ | Tutorials‎ | Filter
Wechseln zu: Navigation, Suche

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

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

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

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

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

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

Der drop-shadow()-Filter erzeugt einen Schlagschatten mit Hilfe eines Gaußschen Unschärfefilters (feGaussianBlur-Element]]). Die nicht-transparenten Teile des Elements (genauer: der Alpha-Kanal des angezeigten Inhalts) werden einheitlich gefärbt und erhalten mit Hilfe der Gaußschen Unschärfe einen verschwommenen Rand. Das Ergebnis wird um einen Offset verschoben und (in der Z-Achse) hinter dem Element dargestellt. Damit ähnelt drop-shadow() der box-shadow-Eigenschaft, unterscheidet sich aber deutlich im Ergebnis. Der Unterschied zu <feGaussianBlur> ist, dass nur ein Wert für stdDeviation angegeben werden kann.

Die Funktion erwartet zwei Längenangaben als X-Offset und Y-Offset für den Schatten sowie optional eine dritte Längenangabe als Wert für die stdDeviation-Eigenschaft des Unschärfefilters. Die Defaults für alle 3 Längenangaben sind 0.

Beachten Sie: Die stdDeviation-Eigenschaft ist kein Radius. Gaußsche Unschärfe verwendet eine Normalverteilung (Gaußsche Glockenkurve), um zu bestimmen, wie stark sich ein bestimmter Bildpunkt auf seine Nachbarschaft auswirkt. Die Standardabweichung ist ein Parameter, der die Breite der Glockenkurve bestimmt und damit indirekt die Breite der Unschärfezone.

Vor oder nach den Längenangaben kann ein Farbwert notiert werden, der die Farbe des Schattens angibt. Fehlt die Farbangabe, erhält der Schatten in den meisten Browsern die Vordergrundfarbe (color) des Elements, auch wenn die Filter Effects Spezifikation sagt, dass der Standardwert für die Farbe transparent sei.

Beispiel ansehen …
.scharf {
  filter: drop-shadow(10px 10px 0 black);  
}
.weich {
  filter: drop-shadow(10px 10px 10px black);  
}
.weicher {
  filter: drop-shadow(20px 20px 20px gray);  
}

Wie Sie am Beispiel des unteren Bilds sehen, passt sich der Schatten den Umrissen des Flugzeugs an. Dies ist mit box-shadow nicht möglich.

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

Siehe auch:

  • Schieberegler (der die Farbwerte eines Bildes stufenlos ändert)

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


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.

Automatisch kontrastreiche Schriftfarbe

Man kann Text je nach Hintergrundhelligkeit schwarz oder weiß einfärben, ohne die Komponenten in HSL oder oklch() aufzulösen:

Schwarz oder Weiß? ansehen …
span {
	color: var(--bgColor);
	filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
	mix-blend-mode: luminosity;
	opacity: 0.95;
}

Dies wird um #AAAAAA herum schwarz. Stellen Sie die Helligkeit niedriger ein, wenn Sie wollen, dass es früher schwarz wird. Spielen Sie auch mit dem Kontrast herum, indem Sie niedrige und hohe Werte verwenden.[1]

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


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


Sepiatönung

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

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

glow-Animation mit CSS

Beispiel ansehen …
.svg-shadow {
  animation: svg-shadow 2s  infinite alternate;
}

@keyframes svg-shadow {
  from {
    filter: drop-shadow( 0 0 0 #fff) drop-shadow( 0 0 0 #e60073) drop-shadow( 0 0 0 #e60073);
  }

  to {
    
    filter: drop-shadow( 0 0 20px #fff) drop-shadow( 0 0 25px #e60073) drop-shadow( 0 0 40px #e60073);
  }
}

Referenz zu einem SVG <filter> Element

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


Beispiel ansehen …
img { 
  filter: url('#KantenErkennung');
}
  <figure>
    <img src="Lauf-3.jpg" width="450" height="450" alt="Lauf" >
    <figcaption>Einbindung von SVG-Filter</figcaption>
  </figure>

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


  1. https://bildung.social/@miunau@meow.social/111911373742374167