Unterschied zwischen backdrop-filter und ::backdrop
Sowohl backdrop-filter als auch ::backdrop gestalten den Hintergrund eines Elements, allerdings auf sehr unterschiedliche Weise:
- backdrop-filter stylt den Hintergrund unter einem Element mit einem CSS Filter wie Unschärfe, Helligkeit und Sättigung.
- Das Pseudo-Element stylt den Fullscreen-Hintergrund eines Overlays und konzentriert die Ansicht auf ein Element wie eine wichtige Nachricht, einen Login-Screen, oder ein Fullscreen-Video.
| Effekt | CSS-Wert | Beschreibung |
|---|---|---|
| Unschärfe | blur(10px) | Weicher, verschwommener Hintergrund |
| Helligkeit | brightness(0.7) | Hintergrund abdunkeln |
| Kontrast | contrast(200%) | Kontraste verstärken |
| Farbton | hue-rotate(90deg) | Farben im Hintergrund verschieben |
| Mehrere Effekte | blur(5px) brightness(0.8) | Kombinationen möglich |
Pseudo-Element ::backdrop spricht das Browserfenster an
::backdrop legt einen Effekt über das gesamte Fullscreen-Fenster, und stellt ein wichtiges Element heraus, sei es ein Formular, eine Nachricht oder ein Video, die Fullscreen angezeigt werden.
::backdrop {
background-color: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
}
So ein Overlay über das gesamte Browserfenster ist mit klassischen Mitteln kein einfaches Spiel. Hier ist es das dialog-Element, dass mit wenigen Zeilen Javascript den Hintergrund »abdämpft«.
backdrop-filter – wirkt auf den Hintergrund
Typische Effekte setzen Unschärfe (blur) oder Farbveränderungen auf den Hintergrund, so etwa bei Overlays, modalen Fenstern oder bei einem Milchglas-Effekt.
Glassmorphism
Frosted Glass
Milchglas-Effekt mit CSS
<figure class="frosted">
<div class="glass-card">
<h2>Glassmorphism</h2>
<p>Frosted Glass <br> Milchglas-Effekt mit CSS</p>
</div>
</figure>
figure.frosted {
background: url(tartuffo.jpg) no-repeat center/cover;
}
.glass-card {
background: rgba(255, 255, 255, 0.15);
border-radius: 16px;
padding: 2rem;
backdrop-filter: blur(10px);
}
Mehr zu CSS Filter, HTML dialog und backdrop
- HTML dialog für Dialogfenster – Pop-ups, Hinweise, Formulare
- CSS Filter: von Grayscale bis Sepia
- CSS ::backdrop und backdrop-filter wirken auf den Hintergrund eines Elements bzw. auf systemseitige Hintergrund-Elemente bei Vollbild.
