Filter

The CSS Podcast – 023: Filters

Angenommen, Sie möchten ein Element mit einem leicht undurchsichtigen, mattierten Glaseffekt erstellen, das über einem Bild liegt. Der Text muss Live-Text sein und darf kein Bild sein. Wie gehen Sie dabei vor?

Mit einer Kombination aus CSS-Filtern und dem backdrop-filter können wir in Echtzeit Effekte anwenden und Bereiche unscharfstellen. Weichzeichnen und Deckkraft sind zwei der vielen verfügbaren Filter. Sehen wir uns kurz an, was sie bewirken und wie sie verwendet werden.

Hinweis : Achten Sie beim Platzieren von Text auf Bildern darauf, dass der Text auch dann noch lesbar ist, wenn der Filtereffekt im Browser eines Nutzers nicht unterstützt wird.

Das filter-Attribut

Browser Support

• 53
• 12
• 35
• 9.1

Source

Sie können einen oder mehrere der folgenden Filter als Wert für filter anwenden. Wenn Sie einen Filter falsch anwenden, funktionieren die restlichen für filter definierten Filter nicht.

blur

Dadurch wird eine gaussianische Unschärfe angewendet. Das einzige Argument, das Sie übergeben können, ist radius, mit dem Sie festlegen, wie stark die Unschärfe angewendet wird. Dies muss eine Längeneinheit sein, z. B. 10px. Prozentsätze sind nicht zulässig.

.my-element {
    filter: blur(0.2em);
}

brightness

Browser Support

• 18
• 12
• 35
• 6

Source

Verwenden Sie die Helligkeitsfunktion, um die Helligkeit eines Elements zu erhöhen oder zu verringern. Der Helligkeitswert wird als Prozentsatz angegeben, wobei das unveränderte Bild den Wert 100 % hat. Bei einem Wert von 0% wird das Bild vollständig schwarz. Werte zwischen 0% und 100% verringern die Helligkeit des Bilds. Verwenden Sie Werte über 100 %, um die Helligkeit zu erhöhen.

.my-element {
    filter: brightness(80%);
}

Hinweis : In Filtern wie brightness können auch Dezimalwerte anstelle von Prozentwerten verwendet werden. Wenn Sie eine Helligkeit von 80% mit einem Dezimalformat festlegen möchten, geben Sie 0.8 ein.

contrast

Browser Support

• 18
• 12
• 35
• 6

Source

Legen Sie einen Wert zwischen 0% und 100% fest, um den Kontrast zu verringern oder zu erhöhen.

.my-element {
    filter: contrast(160%);
}

grayscale

Browser Support

• 18
• 12
• 35
• 6

Source

Wenn Sie einen vollständigen Graustufeneffekt anwenden möchten, verwenden Sie 1 als Wert für grayscale() oder 0 für ein vollständig gesättigtes Element. Sie können auch Prozent- oder Dezimalwerte verwenden, um nur einen teilweisen Graustufeneffekt anzuwenden. Wenn Sie keine Argumente übergeben, wird das Element vollständig in Graustufen dargestellt. Wenn Sie einen Wert von über 100 % übergeben, wird er auf 100 % begrenzt.

.my-element {
    filter: grayscale(80%);
}

invert

Browser Support

• 18
• 12
• 35
• 6

Source

Ähnlich wie bei grayscale können Sie 1 oder 0 an die invert()-Funktion übergeben, um sie zu aktivieren oder zu deaktivieren. Wenn sie aktiviert ist, werden die Farben des Elements vollständig invertiert. Sie können auch Prozent- oder Dezimalwerte verwenden, um nur eine teilweise Farbumkehr anzuwenden. Wenn Sie der invert()-Funktion keine Argumente übergeben, wird das Element vollständig invertiert.

.my-element {
    filter: invert(1);
}

opacity

Browser Support

• 18
• 12
• 35
• 6

Source

Der Filter opacity() funktioniert genauso wie die Eigenschaft opacity. Sie können eine Zahl oder einen Prozentsatz übergeben, 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

Browser Support

• 18
• 12
• 35
• 6

Source

Der Sättigungsfilter ist dem brightness-Filter sehr ähnlich und akzeptiert dasselbe Argument: eine Zahl oder einen Prozentsatz. Anstatt den Helligkeitseffekt zu erhöhen oder zu verringern, erhöht oder verringert saturate die Farbsättigung.

.my-element {
    filter: saturate(155%);
}

sepia

Browser Support

• 18
• 12
• 35
• 6

Source

Mit diesem Filter können Sie einen Sepiaton hinzufügen, der wie grayscale() funktioniert. Der Sepiaton ist ein fotografisches Druckverfahren, bei dem Schwarztöne in Brauntöne umgewandelt werden, um sie zu erwärmen. Sie können eine Zahl oder einen Prozentsatz als Argument für sepia() übergeben, um den Effekt zu erhöhen oder zu verringern. Wenn Sie keine Argumente übergeben, wird ein voller Sepiaeffekt angewendet (entspricht sepia(100%)).

.my-element {
    filter: sepia(70%);
}

hue-rotate

Browser Support

• 18
• 12
• 35
• 6

Source

In der Lektion zu Farben haben Sie gelernt, dass der Farbton in hsl auf eine Drehung des Farbkreises verweist. Dieser Filter funktioniert auf ähnliche Weise. Wenn Sie einen Winkel angeben, z. B. in Grad oder Umdrehungen, ändert sich der Farbton aller Farben des Elements. Wenn Sie kein Argument übergeben, passiert nichts.

.my-element {
    filter: hue-rotate(120deg);
}

drop-shadow

Browser Support

• 18
• 12
• 35
• 6

Source

Sie können einen konturfolgenden Schatten wie in einem Designtool anwenden, z. B. in Photoshop mit drop-shadow. Dieser Schatten wird auf eine Alphamaske angewendet, was ihn sehr nützlich macht, um einem Ausschnittbild einen Schatten hinzuzufügen. Der drop-shadow-Filter nimmt einen Schattenparameter an, der durch Leerzeichen getrennte Werte für „x-Offset“, „y-Offset“, „Weichzeichnen“ und „Farbe“ enthält. Sie ist fast identisch mit box-shadow, aber das Keyword und der Spread-Wert für inset werden nicht unterstützt.

.my-element {
    filter: drop-shadow(5px 5px 10px orange);
}

Weitere Informationen zu den verschiedenen Arten von Schatten finden Sie im Modul Schatten.

url

Browser Support

• 5
• 12
• 3
• 6

Source

Mit dem Filter url können Sie einen SVG-Filter aus einem verknüpften SVG-Element oder einer verknüpften SVG-Datei anwenden. Weitere Informationen zu SVG-Filtern

Hintergrundfilter

Browser Support

• 76
• 79
• 103
• 18

Source

Für das Attribut backdrop-filter sind dieselben Filterfunktionswerte zulässig wie für filter. Der Unterschied zwischen backdrop-filter und filter besteht darin, dass die Filter mit der backdrop-filter-Eigenschaft nur auf den Hintergrund angewendet werden, während sie mit der filter-Eigenschaft auf das gesamte Element angewendet werden.

Das Beispiel gleich zu Beginn dieser Lektion ist perfekt, da der Text nicht verschwommen sein soll und Sie idealerweise keine zusätzlichen HTML-Elemente hinzufügen möchten. Das ist möglich, weil Sie Filter nur auf den Hintergrund anwenden können.

Wissen testen

Ihr Wissen zu Filtern testen

Welche der folgenden Optionen sind CSS-Filterfunktionen?

grayscale()

🎉

invert()

🎉

flip()

Versuch es noch einmal.

multiply()

Versuch es noch einmal.

blur()

🎉

brightness()

🎉

Können in CSS SVG-Filter verwendet werden?

Ja

Mit der Filterfunktion url() ist das möglich.

Nein

Versuch es noch einmal.