filter

CSS-Filter sind ein leistungsstarkes Werkzeug, mit dem Autoren verschiedene visuelle Effekte erzielen können (ähnlich wie Photoshop-Filter für den Browser). Die CSS-Eigenschaft filter bietet Zugriff auf Effekte wie Weichzeichnen oder Farbverschiebung auf dem Rendering eines Elements, bevor das Element angezeigt wird. Filter werden häufig verwendet, um das Rendering eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.

Die Syntax ist

.filter-me {
  filter: blur(3px);
  filter: grayscale(1);
  filter: saturate(2.2);

  filter: none; /* remove existing filter */
}

Es gibt eine Reihe von Funktionen, die für den Wert verwendet werden können

• blur()
• brightness()
• contrast()
• drop-shadow()
• grayscale()
• hue-rotate()
• invert()
• opacity()
• saturate()
• sepia()
• url() – zum Anwenden von SVG-Filtern
• custom() – „kommt bald“

Mehrere Funktionen können durch Leerzeichen getrennt verwendet werden.

.do-more-things {
  filter: blur(20px) grayscale(20%);
}

Filterfunktionen

Um die CSS-Filter-Eigenschaft zu verwenden, geben Sie einen Wert für eine der folgenden oben aufgeführten Funktionen an. Wenn der Wert ungültig ist, gibt die Funktion „none“ zurück. Sofern nicht anders angegeben, akzeptieren die Funktionen, die einen Wert mit einem Prozentzeichen annehmen (wie in 34%), auch den Wert als Dezimalzahl (wie in 0,34).

Hier ist eine Demo, mit der Sie einzelne Filter ein wenig ausprobieren können

grayscale()

filter: grayscale(20%)

/* same as... */
filter: grayscale(0.2);

Konvertiert das Eingabebild in Graustufen. Der Wert „amount“ bestimmt den Anteil der Konvertierung. Ein Wert von 100 % ist vollständig graustufig. Ein Wert von 0 % lässt die Eingabe unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren für den Effekt. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet. Negative Werte sind nicht zulässig.

sepia()

filter: sepia(0.8);

/* same as... */
filter: sepia(80%);

Konvertiert das Eingabebild in Sepia. Der Wert „amount“ bestimmt den Anteil der Konvertierung. Ein Wert von 100 % ist vollständig Sepia. Ein Wert von 0 lässt die Eingabe unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren für den Effekt. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet. Negative Werte sind nicht zulässig.

saturate()

filter: saturate(2);

/* same as... */
filter: saturate(200%);

Sättigt das Eingabebild. Der Wert „amount“ bestimmt den Anteil der Konvertierung. Ein Wert von 0 % ist vollständig entsättigt. Ein Wert von 100 % lässt die Eingabe unverändert. Andere Werte sind lineare Multiplikatoren für den Effekt. Werte über 100 % sind zulässig und ergeben übersättigte Ergebnisse. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet. Negative Werte sind nicht zulässig.

hue-rotate()

filter: hue-rotate(180deg);

/* same as... */
filter: hue-rotate(0.5turn);

Wendet eine Farbtonrotation auf das Eingabebild an. Der Wert „angle“ bestimmt die Anzahl der Grad um den Farbkranz, um die die Eingabeproben angepasst werden. Ein Wert von 0deg lässt die Eingabe unverändert. Wenn der Parameter „angle“ fehlt, wird ein Wert von 0deg verwendet. Der Maximalwert ist 360deg.

invert()

filter: invert(100%);

Invertiert die Proben im Eingabebild. Der Wert „amount“ bestimmt den Anteil der Konvertierung. Ein Wert von 100 % ist vollständig invertiert. Ein Wert von 0 % lässt die Eingabe unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren für den Effekt. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet. Negative Werte sind nicht zulässig.

opacity()

filter: opacity(0.5);

/* same as... */
filter: opacity(50%);

Wendet Transparenz auf die Proben im Eingabebild an. Der Wert „amount“ bestimmt den Anteil der Konvertierung. Ein Wert von 0 % ist vollständig transparent. Ein Wert von 100 % lässt die Eingabe unverändert. Werte zwischen 0 % und 100 % sind lineare Multiplikatoren für den Effekt. Dies entspricht der Multiplikation der Eingabebildproben mit „amount“. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet. Diese Funktion ähnelt der etablierteren Eigenschaft opacity; der Unterschied besteht darin, dass bei Filtern einige Browser Hardwarebeschleunigung für bessere Leistung bieten.

brightness()

filter: brightness(0.5);

/* same as... */
filter: brightness(50%);

Wendet einen linearen Multiplikator auf das Eingabebild an, wodurch es heller oder dunkler erscheint. Ein Wert von 0 % erzeugt ein vollständig schwarzes Bild. Ein Wert von 100 % lässt die Eingabe unverändert. Andere Werte sind lineare Multiplikatoren für den Effekt. Werte über 100 % sind zulässig und ergeben hellere Ergebnisse. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet.

contrast()

filter: contrast(4);

/* same as... */
filter: contrast(400%);

Passt den Kontrast der Eingabe an. Ein Wert von 0 % erzeugt ein vollständig schwarzes Bild. Ein Wert von 100 % lässt die Eingabe unverändert. Werte über 100 % sind zulässig und ergeben Ergebnisse mit weniger Kontrast. Wenn der Parameter „amount“ fehlt, wird ein Wert von 100 % verwendet.

blur()

filter: blur(5px);
filter: blur(1rem);

Wendet einen Gaußschen Weichzeichner auf das Eingabebild an. Der Wert „radius“ bestimmt den Wert der Standardabweichung der Gaußschen Funktion, also wie viele Pixel auf dem Bildschirm ineinander übergehen. Ein größerer Wert erzeugt mehr Weichzeichnung. Wenn kein Parameter angegeben wird, wird ein Wert von 0 verwendet. Der Parameter wird als CSS-Länge angegeben, akzeptiert aber keine Prozentwerte.

drop-shadow()

filter: drop-shadow(2px 2px 5px rgb(0 0 0 / 0.5));
filter: drop-shadow(4px 4px red); /* no blur */

Wendet einen Schlagschatteneffekt auf das Eingabebild an. Ein Schlagschatten ist effektiv eine weichgezeichnete, versetzte Version der Alphamaske des Eingabebilds, die in einer bestimmten Farbe gezeichnet und unter das Bild gelegt wird. Die Funktion akzeptiert einen Parameter vom Typ (definiert in CSS3 Backgrounds), mit der Ausnahme, dass das Schlüsselwort ‚inset‘ nicht zulässig ist.

Diese Funktion ähnelt der etablierteren Eigenschaft box-shadow; der Unterschied besteht darin, dass bei Filtern einige Browser Hardwarebeschleunigung für bessere Leistung bieten.

Drop-shadow ahmt auch die Kontur der beabsichtigten Objekte auf natürliche Weise nach, im Gegensatz zu box-shadow, das nur die Box als Pfad behandelt.

Genau wie bei text-shadow gibt es keinen ‚spread‘-Parameter, um einen soliden Schatten zu erzeugen, der größer als das Objekt ist.

url()

filter: url()

Die Funktion url() nimmt den Speicherort einer XML-Datei entgegen, die einen SVG-Filter angibt, und kann einen Anker zu einem bestimmten Filterelement enthalten. Hier ist ein Tutorial, das als gute Einführung in SVG-Filter mit einer unterhaltsamen Demo dient.

Filter animieren

Da Filter animierbar sind, kann dies Türen für eine ganze Reihe von Spaß öffnen.

Notizen

Sie können beliebig viele Funktionen kombinieren, um das Rendering zu manipulieren, aber die Reihenfolge spielt immer noch eine Rolle (d. h. die Verwendung von grayscale() nach sepia() führt zu einer vollständig grauen Ausgabe).

Ein berechneter Wert anders als „none“ führt zur Erstellung eines Stapelkontextes, genauso wie CSS-Deckkraft. Die Filter-Eigenschaft hat keinen Einfluss auf die Geometrie des Box-Modells des Ziel-Elements, auch wenn Filter das Malen außerhalb des Box-Modells eines Elements verursachen können. Alle Teile des Ziel-Elements werden von Filterfunktionen beeinflusst. Dies umfasst jeglichen Inhalt, Hintergrund, Rahmen, Textdekoration, Umrisslinien und sichtbare Scrollmechanismen des Elements, auf das der Filter angewendet wird, sowie die seiner Nachkommen. Filter können auch auf Inline-Inhalte wie einzelne Textabschnitte angewendet werden.

Die Spezifikation führt auch eine filter(image-URL, filter-functions) Wrapper-Funktion für ein Bild ein. Sie würde es ermöglichen, jedes Bild zum Zeitpunkt der Verwendung in CSS zu filtern. Zum Beispiel könnten Sie ein Hintergrundbild weichzeichnen, ohne den Text weichzuzeichnen. Diese Filterfunktion wird noch nicht in Browsern unterstützt. In der Zwischenzeit können Sie sowohl den Hintergrund als auch den Filter auf ein Pseudoelement anwenden, um einen ähnlichen Effekt zu erzielen.

Die proprietäre IE-Filterei

Wurde auch die filter-Eigenschaft verwendet, wie z.B.

.half-opacity {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
}

Wurde hauptsächlich für Deckkraft verwendet, wenn Sie IE 8 und älter unterstützen mussten.

Weitere Informationen

• W3C Filter Effects Specification
• Bennett Feelys Filtergalerie
• MDN Docs
• CSS Filter Polyfill
• Verständnis von CSS-Filtereffekten

Browser-Unterstützung