The CSS Podcast – 023: Filter
Angenommen, Sie müssen ein Element mit einem etwas undurchsichtigen Milchglaseffekt erstellen, das über dem Bild platziert wird. Der Text muss Live-Text und kein Bild sein. Wie gehen Sie vor?
Mit einer Kombination aus CSS-Filtern und backdrop-filter können wir Effekte anwenden und Inhalte in Echtzeit unkenntlich machen.
Weichzeichnen und Deckkraft sind zwei von vielen verfügbaren Filtern. Sehen wir uns also kurz an, was sie bewirken und wie sie verwendet werden.
Das Attribut filter
Sie können einen oder mehrere der folgenden Filter als Wert für filter anwenden.
Wenn Sie einen Filter falsch anwenden, funktionieren die übrigen für filter definierten Filter nicht.
blur
Damit wird ein gaußscher Weichzeichner angewendet. Das einzige Argument, das Sie übergeben können, ist radius. Dies ist die Wirkung der Unkenntlichmachung.
Es muss eine Längeneinheit sein, z. B. 10px. Prozentsätze sind nicht zulässig.
.my-element {
filter: blur(0.2em);
}
brightness
Um die Helligkeit eines Elements zu erhöhen oder zu verringern, Der Helligkeitswert wird in Prozent angegeben, wobei das unveränderte Bild ein Wert von 100 % ist. Bei einem Wert von 0% wird das Bild vollständig schwarz. Werte zwischen 0% und 100% machen es daher weniger hell. Verwenden Sie Werte über 100 %, um die Helligkeit zu erhöhen.
.my-element {
filter: brightness(80%);
}
contrast
Legen Sie einen Wert zwischen 0% und 100% fest, um den Kontrast zu verringern oder zu erhöhen.
.my-element {
filter: contrast(160%);
}
grayscale
Sie können einen Graustufeneffekt anwenden, indem Sie 1 als Wert für grayscale() verwenden, oder 0, um ein vollständig gesättigtes Element zu erhalten.
Sie können auch Prozent- oder Dezimalwerte verwenden, damit nur ein partieller Graustufeneffekt angewendet wird.
Wenn Sie keine Argumente übergeben, wird das Element vollständig in Graustufen dargestellt.
Wenn Sie einen Wert übergeben, der größer als 100 % ist, wird der Wert auf 100 % begrenzt.
.my-element {
filter: grayscale(80%);
}
invert
Genau wie grayscale können Sie 1 oder 0 an die Funktion invert() übergeben, um sie ein- oder auszuschalten. Wenn sie aktiviert ist, werden die Farben des Elements vollständig invertiert.
Sie können auch Prozent- oder Dezimalwerte verwenden, um nur eine teilweise Umkehr der Farben anzuwenden.
Wenn Sie keine Argumente an die invert()-Funktion übergeben, wird das Element vollständig invertiert.
.my-element {
filter: invert(1);
}
opacity
Der Filter opacity() funktioniert wie das Attribut opacity, bei dem Sie eine Zahl oder einen Prozentsatz übergeben können, um die Deckkraft zu erhöhen oder zu verringern.
Wenn Sie keine Argumente übergeben, ist das Element vollständig sichtbar.
.my-element {
filter: opacity(0.3);
}
saturate
Der Sättigungsfilter ist dem Filter brightness sehr ähnlich und akzeptiert dasselbe Argument: Zahl oder Prozentsatz.
Anstatt den Helligkeitseffekt zu erhöhen oder zu verringern, erhöht oder verringert saturate die Farbsättigung.
.my-element {
filter: saturate(155%);
}
sepia
Mit diesem Filter, der wie bei grayscale() funktioniert, kannst du einen Sepiaeffekt hinzufügen.
Der Sepiaton ist ein Fotodruckverfahren, bei dem Schwarztöne in Brauntöne umgewandelt werden, um sie aufzuwärmen.
Sie können eine Zahl oder einen Prozentsatz als Argument für sepia() übergeben, wodurch der Effekt erhöht oder verringert wird.
Wenn keine Argumente übergeben werden, wird ein vollständiger Sepia-Effekt hinzugefügt (entspricht sepia(100%)).
.my-element {
filter: sepia(70%);
}
hue-rotate
In der Lektion zu Farben haben Sie gelernt, wie der Farbton in hsl auf eine Drehung des Farbrads verweist. Dieser Filter funktioniert ähnlich.
Wenn Sie einen Winkel übergeben, z. B. Grad oder Drehungen, wird der Farbton aller Farben des Elements verschoben und der Teil des Farbrads geändert, auf den es verweist. Wenn Sie kein Argument übergeben, geschieht nichts.
.my-element {
filter: hue-rotate(120deg);
}
drop-shadow
Mit drop-shadow kannst du wie in einem Designtool wie Photoshop einen kurvenförmigen Schlagschatten anwenden.
Dieser Schatten wird auf eine Alphamaske angewendet und ist daher sehr nützlich, um einem ausgeschnittenen Bild einen Schatten hinzuzufügen.
Für den Filter drop-shadow wird ein Schattenparameter verwendet, der durch Leerzeichen getrennte Werte für Offset-x, Offset-y, Weichzeichnen und Farbe enthält.
Er ist fast identisch mit box-shadow, aber das Keyword inset und der Streuwert werden nicht unterstützt.
.my-element {
filter: drop-shadow(5px 5px 10px orange);
}
Weitere Informationen zu den verschiedenen Schattentypen finden Sie im Modul shadows.
url
Mit dem Filter url können Sie einen SVG-Filter aus einem verknüpften SVG-Element oder einer verknüpften Datei anwenden.
Weitere Informationen zu SVG-Filtern
Bilderrahmenfilter
Für das Attribut backdrop-filter können dieselben Filterfunktionswerte wie für filter verwendet werden.
Der Unterschied zwischen backdrop-filter und filter besteht darin, dass das Attribut backdrop-filter die Filter nur auf den Hintergrund anwendet, während die Eigenschaft filter sie auf das gesamte Element anwendet.
Das Beispiel gleich zu Beginn dieser Lektion ist das perfekte Beispiel, denn der Text soll nicht unkenntlich gemacht werden und idealerweise keine zusätzlichen HTML-Elemente hinzufügen. Wenn Sie Filter nur auf den Hintergrund anwenden können, ist dies möglich.
Wissen testen
Testen Sie Ihr Wissen über Filter
Welche der folgenden sind CSS-Filterfunktionen?
grayscale()invert()flip()multiply()blur()brightness()Kann CSS SVG-Filter verwenden?
url() können Sie