Verwendung von Filtereffekten

Das Filtereffekte Modul in CSS bietet Eigenschaften und Funktionen, mit denen Sie die oben beschriebenen visuellen Effekte anwenden können, ohne Photoshop zu verwenden oder zusätzliche HTTP-Anfragen zu senden. Die einzige erforderliche Software ist der Browser des Benutzers. Darüber hinaus sind CSS-Filtereffekte im Gegensatz zu voreingestellten Bildeffekten reaktionsfähig und animierbar.

Das CSS-Filtereffekte-Modul stellt die Eigenschaften filter und backdrop-filter bereit, die Sie verwenden können, um das Rendering von Text, Bildern, Hintergründen und Rahmen oder jedes Elements, auf das Sie diese Eigenschaften anwenden, zu beeinflussen. Dieses Modul definiert auch den Datentyp <filter-function>, mit dem Sie grafische Effekte wie Unschärfe oder Farbanpassung hinzufügen können. Mit den Filterfunktionen können Sie nicht nur das Erscheinungsbild eines Elements verändern, sondern auch auf einen SVG-Filter verweisen, indem Sie einen von Ihnen erstellten Filter verwenden.

Die folgenden zwei Filtereigenschaften des CSS-Filtereffekte-Moduls ermöglichen es Ihnen, null, einen oder mehrere grafische Effekte auf ein Element anzuwenden:

• Mit der filter Eigenschaft können Sie Filtereffekte wie Unschärfe, Schlagschatten und Sepia auf ein Element anwenden, bevor das Element gerendert wird. Die Filtereffekte werden direkt auf das Element angewendet, einschließlich des Inhalts, der Ränder und der Auffüllung des Elements.

• Mit der backdrop-filter Eigenschaft können Sie grafische Effekte auf den Bereich hinter einem Element (dem „Hintergrund“ des Elements) anwenden. Die backdrop-filter-Eigenschaft wird häufig verwendet, um den Vordergrundinhalt besser lesbar zu machen, insbesondere wenn der größere Bereich, auf dem sich der Inhalt befindet, ansonsten nicht genügend Kontrast für den Inhalt bietet. Die Filtereffekte werden nur auf den Hintergrund des Elements angewendet, nicht auf den Inhalt des Elements.

Die filter- und backdrop-filter-Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Filtern, die in der angegebenen Reihenfolge angewendet werden.

Das CSS-Filtereffekte-Modul bietet 10 <filter-function>-Funktionen sowie die Möglichkeit, eine nahezu endlose Reihe von Effekten mithilfe von SVG-Filtern zu definieren, die über einen url()-Verweis angewendet werden.

Die folgende Tabelle listet die 10 Filterfunktionen auf, zusammen mit ihren Werttypen, dem minimal gültigen Wert, falls zutreffend, dem größten Wert, der einen Effekt erzeugt, und dem Anfangswert, der für die Interpolation verwendet wird.

Der erlaubte Mindestwert ist für Filterfunktionen angegeben, die einen Mindestwert haben. Wenn ein Wert unterhalb des Mindestwerts für eine beliebige Filterfunktion angegeben wird, wird die gesamte Eigenschaftsdeklaration ungültig, nicht nur die fehlerhafte Filterfunktion in der durch Komma getrennten Liste.

Der maximale Effektwert kann überschritten werden. Wenn ein Wert größer als der angegebene Maximalwert enthalten ist, ist dies gültig, erhöht jedoch nicht den Effekt über den angegebenen Maximalwert hinaus. Mit anderen Worten, der Effekt auf das Element wird gleich aussehen wie bei Einstellung des maximalen Effektwerts. Zum Beispiel erzeugt sepia(400%) im Sepia-Beispiel den gleichen Effekt wie sepia(100%), dem Maximalwert.

Der Standardwert ist ein Wert, der keinen Effekt erzeugt. Obwohl diese Werte keinen Effekt erzeugen, bieten sie die anfänglichen Interpolationswerte und ein Beispiel dafür, wie der Wert gesetzt werden kann. Diese Standardwerte geben eine Messlatte zwischen dem erlaubten Mindestwert und dem maximalen Effektwert an.

Die filter und backdrop-filter Eigenschaften akzeptieren eine Filterfunktionsliste, die eine oder mehrere <filter-function>s, das Standard-Schlüsselwort none oder einen SVG-Filter als url() Wert enthalten kann.

Wenn Sie über das folgende Sepia-Bild schweben, wird das farbenfrohe Bild sofort angezeigt.

Das Bild wird auf Sepia eingestellt, indem der Wert der filter Eigenschaft als sepia() Filterfunktion angegeben wird. Der Filter wird bei :hover und :focus entfernt, indem filter: none gesetzt wird.

<img tabindex="0" alt="Four trans-people, circa 1912" src="activists.jpg" />

img {
  filter: sepia(100%);
}
img:hover,
img:focus {
  filter: none;
}

Im <img> Element ist tabindex auf 0 gesetzt, um den Fokus zu ermöglichen, ohne die Tab-Reihenfolge für Tastaturnutzer zu verändern, da <img> kein interaktives Element ist.

img {
  max-width: 100%;
  height: 100%;
}

Während sie im Allgemeinen auf Bilder angewendet werden, können die filter- und backdrop-filter-Eigenschaften auf jedes Element oder Pseudo-Element angewendet werden.

In diesem Beispiel wird ein Glüheffekt hinzugefügt, indem ein drop-shadow() Filter mit einem 3px Unschärfe und 0 Versatz verwendet wird.

h1 {
  color: midnightblue;
  filter: drop-shadow(0 0 3px magenta);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1>Glow created with CSS filter</h1>

Während das Sepia filter-Beispiel nur eine einzelne Filterfunktion enthielt, können Sie mehrere Filter einstellen. Die filter und backdrop-filter Eigenschaften akzeptieren eine durch Leerzeichen getrennte Liste von Filtern, die in der angegebenen Reihenfolge angewendet werden.

Dieses Beispiel wendet zwei Filter — hue-rotate() und blur() — über die backdrop-filter Eigenschaft an. Der Hintergrund, der Bereich hinter dem <p> Element, hat eine Farbverschiebung und eine Unschärfe appliziert.

.container {
  background: url(image.jpg) no-repeat left / contain goldenrod;
}
p {
  backdrop-filter: hue-rotate(240deg) blur(5px);
  background-color: rgb(255 255 255 / 10%);
  text-shadow: 2px 2px black;
}

.container {
  padding: 3rem;
  width: 30rem;
}
p {
  padding: 0.5rem;
  color: #ffffff;
  font-size: 2rem;
  font-family: sans-serif;
}

<div
  class="container"
  style="background-image: url('https://mdn.github.io/shared-assets/images/examples/listen_to_black_women.jpg');">
  <p>
    Text on images can be illegible and inaccessible even with a drop shadow.
  </p>
</div>

Da Filter in der Reihenfolge angewendet werden, können Sie Filterfunktionen mehrmals verwenden. In diesem Beispiel wurde der drop-shadow() Filter vier Mal angewandt, jedes Mal mit einem anderen <shadow> Wert.

<img src="mandala.svg" alt="Colorful mandala" role="img" />
<img src="mandala.svg" alt="Plain mandala" role="img" />

img {
  width: 49%;
}

img {
  filter: drop-shadow(2px 2px 0 hsl(300deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(210deg 100% 50%))
    drop-shadow(2px 2px 0 hsl(120deg 100% 50%))
    drop-shadow(-2px -2px 0 hsl(30deg 100% 50%));
}
img + img {
  filter: none;
}

Im ersten Mandala-Beispiel werden vier Schlagschatten auf eine liniengezeichnete SVG angewendet. Die gleiche SVG, bei der der Filter mit filter: none entfernt wird, ist zum Vergleich enthalten.

Beim Erstellen von Filtereffekten wird der filter oder backdrop-filter Eigenschaft eine durch Leerzeichen getrennte Liste von Filtern bereitgestellt. Diese Filtereffekte werden in der Reihenfolge angewendet, in der sie erscheinen.

In diesem Beispiel werden sowohl ein magenta Schlagschatten als auch eine 180deg Farbrotation auf die Überschrift der ersten Ebene angewendet. Das Beispiel zeigt den Effekt, wenn diese Filter in unterschiedlichen Reihenfolgen angewendet werden.

h1 {
  color: midnightblue;
}
#hueFirst {
  filter: hue-rotate(180deg) drop-shadow(3px 3px magenta);
}
#shadowFirst {
  filter: drop-shadow(3px 3px magenta) hue-rotate(180deg);
}

h1 {
  font-family: sans-serif;
  font-size: 2rem;
}

<h1 id="hueFirst">Hue change happens before drop shadow.</h1>
<h1 id="shadowFirst">Drop shadow applied before hue change.</h1>
<h1>No filter effects applied.</h1>

Die gleichen Filter werden auf beide Textzeilen angewendet, jedoch in unterschiedlicher Reihenfolge. In der ersten Zeile wird der Farbton des Textes verändert, bevor der Schatten angewendet wird, sodass der Schatten magenta ist. In der zweiten Zeile wird der Schlagschatten auf den dunkelblauen Text hinzugefügt, und dann wird der Farbton sowohl des Textes als auch des Schattens verändert.

Auf die dritte Zeile wird kein Filtereffekt angewendet, um den ursprünglichen Effekt im Vergleich zu zeigen. Daher bleibt die dritte Zeile midnightblue oder #191970. Der hue-rotate(180deg) Filter verändert den Text in den ersten beiden Zeilen zu #252500.

Neben den 10 definierten <filter-function>s unterstützt die CSS-Filtereffekte url(), wobei der Parameter ein SVG-Filter ist, der in eine interne oder externe SVG-Datei eingebettet sein kann.

Ein einziges SVG kann verwendet werden, um mehrere Filter zu definieren, von denen jeder eine id hat:

<svg role="none">
  <defs>
    <filter id="blur1">
      <feGaussianBlur stdDeviation="1" edgeMode="duplicate" />
    </filter>
    <filter id="blur3">
      <feGaussianBlur stdDeviation="3" edgeMode="duplicate" />
    </filter>
    <filter id="hue-rotate90">
      <feColorMatrix type="hueRotate" values="90" />
    </filter>
  </defs>
</svg>

Die id des Filters wird in der url() sowohl für Inline- als auch externe SVGs referenziert:

filter: url(#blur3);
filter: url("https://example.com/svg/filters.svg#blur3");

Ähnlich wie die blur() Filterfunktion einen Gaußschen Weichzeichner auf die Elemente anwendet, auf die sie angewendet wird, kann das SVG <feGaussianBlur> Filterelement auch verwendet werden, um Inhalte unscharf zu machen.

In beiden Fällen gibt der Unschärferadius, der in CSS als <length> und in SVG als pixelläquivalenter <number> angegeben wird, den Wert der Standardabweichung zur Gaußschen Funktion an. Mit anderen Worten, er definiert die Anzahl von Pixeln auf dem Bildschirm, die ineinander übergehen; ein größerer Wert erzeugt mehr Unschärfe.

Das <filter>'s stdDeviation Attribut akzeptiert bis zu zwei Werte, die die Erstellung komplexerer Unschärfewerte ermöglichen. Um eine gleichwertige Unschärfe zu erzeugen, fügen wir einen Wert für stdDeviation ein:

<table cellpadding="5">
  <thead>
    <tr>
      <th>CSS example</th>
      <th>SVG example</th>
      <th>Original image</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img
          class="filter"
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag"
          class="svgFilter" />
      </td>
      <td>
        <img
          src="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
          alt="Pride flag" />
      </td>
    </tr>
  </tbody>
</table>

<svg role="img" aria-label="Flag">
  <filter id="blur">
    <feGaussianBlur stdDeviation="3.5" edgeMode="duplicate" />
  </filter>
  <image
    xlink:href="https://mdn.github.io/shared-assets/images/examples/progress-pride-flag.jpg"
    filter="url(#blur)" />
</svg>

Der SVG url() Filterwert kann als Wert des SVG <image> Elements' filter Attributs oder als Teil des Werts der CSS filter und backdrop-filter Eigenschaften enthalten sein.

.filter {
  filter: blur(3.5px);
}
.svgFilter {
  filter: url(#blur);
}

• mask
• background-blend-mode, mix-blend-mode
• CSS-Filtereffekte
• SVG <filter> Element, SVG filter Attribut in SVG
• Anwendung von SVG-Effekten auf HTML-Inhalte