Filter - CSS-Tricks

Anonim

CSS-Filter sind ein leistungsstarkes Tool, mit dem Autoren unterschiedliche visuelle Effekte erzielen können (ähnlich wie Photoshop-Filter für den Browser). Die CSS- filterEigenschaft bietet Zugriff auf Effekte wie Unschärfe oder Farbverschiebung beim Rendern eines Elements, bevor das Element angezeigt wird. Filter werden häufig verwendet, um das Rendern eines Bildes, eines Hintergrunds oder eines Rahmens anzupassen.

Die Syntax lautet:

.filter-me ( filter: blur(3px); filter: grayscale(1); filter: saturate(2.2); filter: none; /* remove existing filter */ )

Für den Wert stehen eine Reihe von Funktionen zur Verfügung:

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

Es können mehrere Funktionen verwendet werden, die durch Leerzeichen getrennt sind.

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

Filterfunktionen

Um die CSS-Filtereigenschaft 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 mit einem Prozentzeichen ausgedrückten Wert annehmen (wie in 34%), auch den als Dezimalzahl ausgedrückten Wert (wie in 0,34).

Hier ist eine Demo, mit der Sie ein bisschen mit einzelnen Filtern spielen können:

Graustufen ()

filter: grayscale(20%) /* same as… */ filter: grayscale(0.2);

Konvertiert das Eingabebild in Graustufen. Der Wert „Betrag“ definiert den Anteil der Umwandlung. Ein Wert von 100% ist vollständig grau. 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 "Betrag" fehlt, wird ein Wert von 100% verwendet. Negative Werte sind nicht erlaubt.

Sepia()

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

Konvertiert das Eingabebild in Sepia. Der Wert „Betrag“ definiert den Anteil der Umwandlung. 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 "Betrag" fehlt, wird ein Wert von 100% verwendet. Negative Werte sind nicht erlaubt.

sättigen()

filter: saturate(2); /* same as… */ filter: sature(200%);

Sättigt das Eingabebild. Der Wert „Betrag“ definiert den Anteil der Umwandlung. Ein Wert von 0% ist völlig ungesä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, was zu übersättigten Ergebnissen führt. Wenn der Parameter "Betrag" fehlt, wird ein Wert von 100% verwendet. Negative Werte sind nicht erlaubt.

Farbton drehen ()

filter: hue-rotate(180deg); /* same as… */ filter: hue-rotate(0.5turn);

Wendet eine Farbtonrotation auf das Eingabebild an. Der Wert „Winkel“ definiert die Anzahl der Grad um den Farbkreis, in dem die eingegebenen Samples angepasst werden. Ein Wert von 0 Grad lässt die Eingabe unverändert. Wenn der Parameter "Winkel" fehlt, wird der Wert von 0degverwendet. Der Maximalwert ist 360deg.

umkehren()

filter: invert(100%);

Invertiert die Samples im Eingabebild. Der Wert „Betrag“ definiert den Anteil der Umwandlung. Ein Wert von 100% wird 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 "Betrag" fehlt, wird ein Wert von 100% verwendet. Negative Werte sind nicht erlaubt.

Opazität()

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

Wendet Transparenz auf die Samples im Eingabebild an. Der Wert „Betrag“ definiert den Anteil der Umwandlung. 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 dem Multiplizieren der eingegebenen Bildabtastwerte mit dem Betrag. Wenn der Parameter "Betrag" fehlt, wird ein Wert von 100% verwendet. Diese Funktion ähnelt der etablierteren Opazitätseigenschaft. Der Unterschied besteht darin, dass einige Browser mit Filtern eine Hardwarebeschleunigung für eine bessere Leistung bieten. Negative Werte sind nicht erlaubt.

Helligkeit()

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

Wendet einen linearen Multiplikator auf das Eingabebild an, wodurch es mehr oder weniger hell erscheint. Ein Wert von 0% erzeugt ein Bild, das vollständig schwarz ist. 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, um bessere Ergebnisse zu erzielen. Wenn der Parameter "Betrag" fehlt, wird ein Wert von 100% verwendet.

Kontrast()

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

Passt den Kontrast der Eingabe an. Ein Wert von 0% erzeugt ein Bild, das vollständig schwarz ist. Ein Wert von 100% lässt die Eingabe unverändert. Werte über 100% sind zulässig, um kontrastärmere Ergebnisse zu erzielen. Wenn der Parameter "Betrag" fehlt, wird ein Wert von 100% verwendet.

verwischen()

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

Wendet eine Gaußsche Unschärfe auf das Eingabebild an. Der Wert 'Radius' definiert den Wert der Standardabweichung zur Gaußschen Funktion oder die Anzahl der Pixel auf dem Bildschirm, die ineinander übergehen, sodass ein größerer Wert mehr Unschärfe erzeugt. Wenn kein Parameter angegeben ist, wird der Wert 0 verwendet. Der Parameter wird als CSS-Länge angegeben, akzeptiert jedoch keine Prozentwerte.

Schlagschatten ()

filter: drop-shadow((2,3) ?)

Wendet einen Schlagschatteneffekt auf das Eingabebild an. Ein Schlagschatten ist effektiv eine unscharfe, versetzte Version der Alpha-Maske des Eingabebildes, die in einer bestimmten Farbe gezeichnet und unter dem Bild zusammengesetzt ist. Die Funktion akzeptiert einen Parameter vom Typ (definiert in CSS3-Hintergründen), mit der Ausnahme, dass das Schlüsselwort 'inset' nicht zulässig ist.

Diese Funktion ähnelt der etablierteren Box-Shadow-Eigenschaft. Der Unterschied besteht darin, dass einige Browser mit Filtern eine Hardwarebeschleunigung für eine bessere Leistung bieten.

Schlagschatten ahmt auch die Umrisse der beabsichtigten Objekte auf natürliche Weise nach, im Gegensatz dazu wird box-shadownur die Box als Pfad behandelt.

Genau wie bei Textschatten gibt es keinen "Spread" -Parameter, um einen festen Schatten zu erstellen, der größer als das Objekt ist.

url ()

filter: url()

Die url()Funktion nimmt den Speicherort einer XML-Datei ein, die einen SVG-Filter angibt, und kann einen Anker für ein bestimmtes Filterelement enthalten. Hier ist ein Tutorial, das als nette Einführung in SVG-Filter mit einer lustigen Demo dient.

Filter animieren

Da Filter animierbar sind, können sie die Türen für eine ganze Menge Spaß öffnen.

Anmerkungen

Sie können eine beliebige Anzahl von Funktionen kombinieren, um das Rendering zu bearbeiten. Die Reihenfolge ist jedoch weiterhin wichtig (dh die Verwendung von grayscale()after sepia()führt zu einer vollständig grauen Ausgabe).

Ein anderer berechneter Wert als "none" führt zur Erstellung eines Stapelkontexts auf dieselbe Weise wie die CSS-Deckkraft. Die Filtereigenschaft hat keine Auswirkung auf die Geometrie des Feldmodells des Zielelements, obwohl Filter dazu führen können, dass außerhalb des Rahmenrahmens eines Elements gemalt wird. Alle Teile des Zielelements sind von Filterfunktionen betroffen. Dies umfasst alle Inhalte, Hintergründe, Rahmen, Textdekorationen, Umrisse und sichtbaren Bildlaufmechanismen des Elements, auf das der Filter angewendet wird, sowie der Nachkommen. Filter können auch auf Inline-Inhalte angewendet werden, z. B. auf einzelne Textbereiche.

Die Spezifikation führt auch eine filter(image-URL, filter-functions)Wrapper-Funktion für ein Bild ein. Sie können damit jedes Bild filtern, wenn Sie es in CSS verwenden. Sie können beispielsweise ein Hintergrundbild verwischen, ohne den Text zu verwischen. Diese Filterfunktion wird in Browsern noch nicht 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.

Das IE-eigene Filtermaterial

Auch verwendet die filterEigenschaft, wie:

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

Wird hauptsächlich für die Deckkraft verwendet, wenn Sie IE 8 und niedriger unterstützen müssen.

Mehr Informationen

  • W3C-Filtereffektspezifikation
  • http://html5-demos.appspot.com/static/css/filters/index.html
  • Bennett Feelys Filtergalerie
  • MDN Docs
  • Kann ich benutzen
  • http://www.broken-links.com/2013/11/20/cross-browser-filters-css-svg
  • https://github.com/Schepp/CSS-Filters-Polyfill
  • Grundlegendes zu CSS-Filtereffekten

Browser-Unterstützung

Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

Desktop

Chrom Feuerfuchs IE Kante Safari
18 * 35 Nein 79 6 *

Handy / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 6,0-6,1 *