Filter

The CSS Podcast – 023: Filters

Angenommen, Sie müssen ein Element mit einem leicht deckenden, Milchglaseffekt erstellen, das sich über dem Bild befindet. Der Text muss Live-Text und kein Bild sein. Wie machen Sie das?

Mit einer Kombination aus CSS-Filtern und backdrop-filter können Effekte angewendet und Benötigtes in Echtzeit unkenntlich gemacht werden. „Weichzeichnen“ und „Deckkraft“ sind zwei von vielen verfügbaren Filtern. Sehen wir uns kurz die Funktionen und ihre Verwendung an.

Das Attribut filter

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

blur

Dadurch wird eine Gaußsche Unkenntlichmachung angewendet und das einzige Argument, das Sie übergeben können, ist ein radius, das angibt, wie stark die Unkenntlichmachung angewendet wird. Dabei muss es sich um eine Längeneinheit wie 10px handeln. Prozentsätze werden nicht akzeptiert.

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

brightness

Um die Helligkeit eines Elements zu erhöhen oder zu verringern, verwenden Sie die Funktion „Helligkeit“. Der Helligkeitswert wird als Prozentsatz ausgedrückt, wobei das unveränderte Bild als Wert von 100 % ausgedrückt wird. Bei einem Wert von 0% wird das Bild vollständig schwarz. Werte zwischen 0% und 100% machen es 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 bzw. zu erhöhen.

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

grayscale

Sie können einen vollständig Graustufeneffekt anwenden, indem Sie 1 als Wert für grayscale() oder 0 verwenden, um ein vollständig gesättigtes Element zu erhalten. 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 übergeben, der größer als 100 % ist, wird er auf 100 % begrenzt.

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

invert

Genau wie bei 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 Inversion der Farben anzuwenden. Wenn Sie keine Argumente an die Funktion invert() übergeben, wird das Element vollständig invertiert.

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

opacity

Der opacity()-Filter funktioniert genau wie die opacity-Eigenschaft, bei der 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 grayscale() funktioniert, können Sie einen Sepiaton-Effekt hinzufügen. Der Sepiaton ist eine fotografische Drucktechnik, bei der 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, mit dem der Effekt erhöht oder verringert wird. Werden keine Argumente übergeben, wird ein vollständiger Sepia-Effekt hinzugefügt (entspricht sepia(100%)).

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

hue-rotate

Wie der Farbton in hsl auf eine Rotation des Farbrads verweist, erfahren Sie in der Lektion zu den Farben. Dieser Filter funktioniert auf ähnliche Weise. Wenn Sie einen Winkel übergeben, z. B. Grad oder Drehung, wird der Farbton aller Elementfarben verschoben und der Teil des Farbrads geändert, auf das es verweist. Wenn Sie kein Argument übergeben, geschieht nichts.

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

drop-shadow

Sie können einen Schlagschatten, der sich an die Kurve erstreckt, wie in einem Designtool wie Photoshop mit drop-shadow anwenden. Dieser Schatten wird auf eine Alpha-Maske angewendet, was sehr nützlich ist, um einem Cutout-Bild einen Schatten hinzuzufügen. Der Filter drop-shadow verwendet einen Schattenparameter, 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 Streuungswert werden nicht unterstützt.

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

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

url

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

Bilderrahmenfilter

Die Eigenschaft backdrop-filter akzeptiert dieselben Filterfunktionswerte wie die von filter. Der Unterschied zwischen backdrop-filter und filter besteht darin, dass die backdrop-filter-Eigenschaft die Filter nur auf den Hintergrund anwendet, während die filter-Eigenschaft sie auf das gesamte Element anwendet.

Das Beispiel zu Beginn dieser Lektion ist das perfekte Beispiel, denn der Text soll nicht unkenntlich gemacht werden. Idealerweise brauchen Sie keine zusätzlichen HTML-Elemente. Das ist möglich, wenn Sie Filter nur auf den Hintergrund anwenden können.

Wissen testen

Testen Sie Ihr Wissen über Filter