Hintergründe im Stil eines Betriebssystems mit Bilderrahmenfilter erstellen

Unkenntlichmachung und Farbverschiebung hinter einem Element

Adam Argyle

Joe Medley

Durch Transparenz, Unschärfe und andere Effekte können Sie Tiefe erzeugen und gleichzeitig den Kontext der Hintergrundinhalte beibehalten. Sie unterstützen eine Vielzahl von Anwendungsfällen wie Milchglas, Video-Overlays, durchsichtige Navigationsleisten, Zensur unangemessener Bilder und Bildladevorgänge. Diese Effekte kennen Sie vielleicht von zwei beliebten Betriebssystemen: Windows 10 und iOS.

Ein Beispiel für einen Milchglaseffekt. Quelle:

In der Vergangenheit waren diese Techniken im Web schwer zu implementieren und erforderten weniger als perfekte Hacks oder Behelfslösungen. In den letzten Jahren haben sowohl Safari als auch Edge diese Funktionen über die Eigenschaft background-filter (und alternativ -webkit-backdrop-filter) bereitgestellt, mit der sich Vorder- und Hintergrundfarben basierend auf Filterfunktionen dynamisch mischen lassen. Ab Version 76 unterstützt Chrome jetzt background-filter.

Eine Demonstration der Filterfunktionen für backdrop-filter. Sehen Sie sich das Beispiel auf CodePen an.

Unterstützte Browser

Unterstützte Browser

• 76
• 79
• 103
• 18

Quelle

Aus Leistungsgründen solltest du auf ein Bild anstelle eines Polyfills zurückgreifen, wenn backdrop-filter nicht unterstützt wird. Im folgenden Beispiel sehen Sie das.

@supports (backdrop-filter: none) {
    .background {
        backdrop-filter: blur(10px);
    }
}

@supports not (backdrop-filter: none) {
  .background {
    background-image: blurred-hero.png;
  }
}

Grundlagen

• Mit der backdrop-filter-Eigenschaft werden ein oder mehrere Filter auf ein Element angewendet, wodurch sich das Erscheinungsbild aller Elemente hinter dem Element ändert.
• Das überlagernde Element muss mindestens teilweise transparent sein.
• Das überlagernde Element erhält einen neuen Stapelkontext.

Achtung: backdrop-filter kann die Leistung beeinträchtigen. Testen Sie es vor der Bereitstellung.

Mit CSS backdrop-filter werden ein oder mehrere Effekte auf ein Element angewendet, das durchscheinend oder transparent ist. Die folgenden Bilder veranschaulichen das.

Keine Transparenz im Vordergrund

.frosty-glass-pane {
  backdrop-filter: blur(2px);
}

Transparenz im Vordergrund

.frosty-glass-pane {
  opacity: .9;
  backdrop-filter: blur(2px);
}

Auf dem Bild links ist zu sehen, wie sich überlappende Elemente darstellen würden, wenn backdrop-filter nicht verwendet oder unterstützt würde. Im Bild rechts wird mit backdrop-filter ein Unschärfeeffekt angewendet. Beachten Sie, dass zusätzlich zu backdrop-filter opacity verwendet wird. Ohne opacity gäbe es nichts, auf das die Unkenntlichmachung angewendet werden könnte. Selbstverständlich gibt es keine Auswirkungen auf den Hintergrund, wenn opacity auf 1 (vollständig deckend) eingestellt ist.

Die backdrop-filter-Eigenschaft ähnelt den CSS-Filtern, da alle gängigen Filterfunktionen unterstützt werden: blur(), brightness(), contrast(), opacity(), drop-shadow() usw. Außerdem wird die Funktion url() unterstützt, wenn Sie ein externes Bild als Filter sowie die Keywords none, inherit, initial und unset verwenden möchten. Auf MDN finden Sie Erläuterungen zu all dem, einschließlich Beschreibungen von Syntax, Filtern und Werten.

Wenn backdrop-filter nicht auf none festgelegt ist, erstellt der Browser einen neuen Stapelkontext. Es kann auch ein enthaltender Block erstellt werden, aber nur, wenn das Element Nachkommen mit absoluter und fester Position hat.

Sie können Filter kombinieren, um umfassende und clevere Effekte zu erhalten, oder nur einen Filter verwenden, um subtilere oder präzisere Effekte zu erzielen. Sie können sie sogar mit SVG-Filtern kombinieren.

Beispiele

Designtechniken und -stile, die bisher für Betriebssysteme reserviert waren, sind jetzt mit einer einzigen CSS-Deklaration leistungsfähig und erreichbar. Sehen wir uns einige Beispiele an.

Einzelfilter

Im folgenden Beispiel wird der Frosteffekt durch die Kombination von Farbe und Unschärfe erzielt. Der Weichzeichner wird von backdrop-filter bereitgestellt, während die Farbe von der halbtransparenten Hintergrundfarbe des Elements stammt.

.blur-behind-me {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(.5rem);
}

Dieses Beispiel können Sie selbst in CodePen ausprobieren.

Mehrere Filter

Manchmal sind mehrere Filter erforderlich, um den gewünschten Effekt zu erzielen. Geben Sie dazu eine Liste von Filtern an, die durch ein Leerzeichen getrennt sind. Beispiel:

.brighten-saturate-and-blur-behind-me {
  backdrop-filter: brightness(150%) saturate(150%) blur(1rem);
}

Im folgenden Beispiel hat jeder der vier Bereiche eine andere Kombination von Hintergrundfiltern, während dieselben Formen dahinter animiert werden.

<ph type="x-smartling-placeholder">

Probiere dieses Beispiel in CodePen aus.

Overlays

In diesem Beispiel wird gezeigt, wie ein halbtransparenter Hintergrund unscharf gemacht wird, um den Text lesbar zu machen und gleichzeitig stilistisch mit dem Hintergrund einer Seite zu verschmelzen.

.modal {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.5);
}

Probier mal dieses Beispiel aus.

Textkontrast auf dynamischen Hintergründen

Wie bereits erwähnt, ermöglicht backdrop-filter leistungsstarke Effekte, die im Web schwierig oder unmöglich wären. Ein Beispiel hierfür ist das Ändern eines Hintergrunds als Reaktion auf eine Animation. In diesem Beispiel behält backdrop-filter den hohen Kontrast zwischen dem Text und dem Hintergrund bei, unabhängig davon, was sich dahinter verbirgt. Er beginnt mit der Standardhintergrundfarbe darkslategray und verwendet backdrop-filter, um die Farben nach der Transformation invertieren zu lassen.

.container::before {
  z-index: 1;
  background-color: darkslategray;
  filter: invert(1);
}

.container::after {
    backdrop-filter: invert(1);
  z-index: 3;
}

Sehen Sie sich dieses Beispiel von Chen Hui Jing in Codrops an.

Fazit

Mehr als 560 von Ihnen haben den Chromium-Fehler in den letzten Jahren hochgewählt und dies eindeutig als eine lang erwartete CSS-Funktion gekennzeichnet. Mit der Veröffentlichung von backdrop-filter in Chrome-Version 76 kommt das Web der Darstellung einer echten Betriebssystem-Oberfläche einen Schritt näher.

Zusätzliche Ressourcen

• Spezifikation
• Status der Chrome-Plattform
• MDN
• background-filter in CSS-Tricks
• Beispiele auf Codepen