Filter

The CSS Podcast – 023: Filter

Angenommen, Sie müssen ein Element konstruieren, das etwas deckend ist, Milchglas-Effekts über dem Bild. Der Text muss Live-Text und kein Bild sein. Wie gehen Sie vor?

Eine Kombination aus CSS-Filtern und dem 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

Unterstützte Browser

  • Chrome: 53. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 9.1 <ph type="x-smartling-placeholder">

Quelle

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

blur

Dabei wird ein gaußscher Weichzeichnereffekt angewendet. Das einzige Argument, das Sie übergeben können, ist ein radius, Dieser lautet wie stark weichgezeichnet wird. Es muss eine Längeneinheit sein, z. B. 10px. Prozentsätze sind nicht zulässig.

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

brightness

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Um die Helligkeit eines Elements zu erhöhen oder zu verringern, verwenden Sie die Helligkeitsfunktion. Der Helligkeitswert wird in Prozent angegeben. Das unveränderte Bild wird als Wert von 100 % angegeben. Bei einem Wert von 0% wird das Bild vollständig schwarz, Werte zwischen 0% und 100% machen das Bild also weniger hell. Verwenden Sie Werte über 100 %, um die Helligkeit zu erhöhen.

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

contrast

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

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

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

grayscale

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

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

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Genau wie grayscale, können Sie 1 oder 0 an die Funktion invert() übergeben, um sie zu aktivieren oder zu deaktivieren. Ist sie aktiviert, 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

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Der Filter opacity() funktioniert genau wie das Attribut 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

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

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

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

sepia

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

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 verstärkt 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

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Sie haben gelernt, wie sich der Farbton in hsl auf eine Drehung des Farbrads im Farben-Kurs und dieser Filter funktioniert ähnlich. Wenn Sie einen Winkel (z. B. Grad oder Drehungen) übergeben, wird der Farbton aller Elementfarben verschoben, den Teil des Farbrads ändert, auf den er verweist. Wenn Sie kein Argument übergeben, geschieht nichts.

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

drop-shadow

Unterstützte Browser

  • Chrome: 18. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 35. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

Sie können einen kurvenförmigen Schlagschatten wie in einem Designtool anwenden, wie Photoshop mit drop-shadow 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. Sie ist fast identisch mit box-shadow, Das Keyword inset und der Streuwert werden jedoch nicht unterstützt.

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

Weitere Informationen zu den verschiedenen Schattentypen finden Sie im Modul shadows.

url

Unterstützte Browser

  • Chrome: 5. <ph type="x-smartling-placeholder">
  • Rand: 12. <ph type="x-smartling-placeholder">
  • Firefox: 3. <ph type="x-smartling-placeholder">
  • Safari: 6. <ph type="x-smartling-placeholder">

Quelle

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

Bilderrahmenfilter

Unterstützte Browser

  • Chrome: 76 <ph type="x-smartling-placeholder">
  • Edge: 79. <ph type="x-smartling-placeholder">
  • Firefox: 103 <ph type="x-smartling-placeholder">
  • Safari: 18. <ph type="x-smartling-placeholder">

Quelle

backdrop-filter akzeptiert dieselben Filterfunktionswerte wie filter. Der Unterschied zwischen backdrop-filter und filter dass die Eigenschaft backdrop-filter die Filter nur auf den Hintergrund anwendet, Die Eigenschaft filter wendet sie auf das gesamte Element an.

Das Beispiel gleich zu Beginn dieser Lektion ist das perfekte Beispiel. da der Text nicht unkenntlich gemacht werden soll und idealerweise keine zusätzlichen HTML-Elemente hinzugefügt werden sollen. 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()
Versuch es noch einmal.
multiply()
Versuch es noch einmal.
blur()
🎉
brightness()
🎉

Kann CSS SVG-Filter verwenden?

Ja
Mit der Filterfunktion url() können Sie
Nein
Versuch es noch einmal.