Die Landingpage für Apple Arcade hat einen coolen Effekt, bei dem einige „weiße“ Texte eine Art transluzenten Effekt haben. Man kann etwas von der Farbe des Hintergrunds dahinter durch den Text hindurchsehen. Es ist nicht wie bei Knockout-Text, wo man den genauen Hintergrund sieht. In diesem Fall läuft darunter ein Live-Video. Es ist, als ob man das Video unscharf machen und dann dieses unscharfe Video durch die Buchstaben zeigen würde.
Nun, genau das passiert.
Hier ist ein Video, damit Sie es in Aktion sehen können (auch nachdem die Seite geändert wurde oder wenn Sie einen Browser verwenden, der den Effekt nicht unterstützt)
Und hey, wenn Ihnen der Effekt nicht gefällt, ist das in Ordnung. Der Rest davon ist eine technologische Erkundung, wie es gemacht wurde – keine Erklärung, wann und wie Sie es verwenden sollten.
Es gibt hier zwei Haupteigenschaften, die perfekt zusammenarbeiten müssen, um das zu bewerkstelligen
Die backdrop-filter-Eigenschaft ist kinderleicht zu verwenden. Stellen Sie sie ein, und sie kann den Hintergrund filtern, der durch dieses Element sichtbar ist.
Sehen Sie den Pen
Grundlegendes Beispiel für backdrop-filter von Chris Coyier (@chriscoyier)
auf CodePen.
Als Nächstes platzieren wir Text in diesem Container, aber wir verstecken ihn tatsächlich. Er muss nur für die Barrierefreiheit vorhanden sein. Aber wir ersetzen den Text gewissermaßen, indem wir aus dem Text eine Ausschnittmaske erstellen. Ja, tatsächlich! Wir verwenden das SVG <text> innerhalb eines <clipPath>-Elements und verwenden dies dann, um das gesamte Element zu maskieren, auf dem backdrop-filter angewendet wird.
Sehen Sie den Pen
Text mit unscharfem Hintergrund von Chris Coyier (@chriscoyier)
auf CodePen.
Aus irgendeinem Grund (den ich für einen Fehler halte) rendert Chrome das so
Es gelingt nicht, das Element richtig zu maskieren, obwohl es angeblich beide Eigenschaften unterstützt. Ich habe versucht, einen @supports-Block zu verwenden, aber das ist hier nicht hilfreich. Es sieht so aus, als ob Apples Seite eine .no-backdrop-blur-Klasse auf dem <html>-Element (Modernizr-Stil) hat, die in Chrome gesetzt wird, um die Verwendung des Effekts ganz zu vermeiden. Ich habe meine Demo einfach kaputt gehen lassen. Vielleicht wird das eines Tages behoben.
Es sieht in Safari richtig aus
Und Firefox unterstützt derzeit backdrop-filter nicht, daher macht der @supports-Block das, was er soll, und zeigt stattdessen weißen Text an.
Danke, dass Sie das aufgeschrieben haben!
Nun, es funktioniert nirgends richtig, außer in Safari. Ok.
Schönes Beispiel hier!
Nur eine kurze Anmerkung – das Problem mit Chrome ist ein bekannter Fehler, der in Chrome 77 behoben ist und in etwa einer Woche stabil veröffentlicht wird. Mehr Details finden Sie unter https://crbug.com/974857.
Außerdem funktioniert es in Chrome nicht mit overflow-hidden und ignoriert die Kombination von border-radius mit overflow-hidden sowohl in Safari als auch in Chrome.
Siehe: https://codepen.io/jstrst/pen/yLBZYyv
Ausgezeichnet, gefällt mir
Bezüglich des Problems von Pixelofficer mit overflow-hidden, Sie haben Recht – das sieht nach einem Fehler aus. Ich habe es hier dokumentiert: https://crbug.com/1009155. Ich habe Ihr Beispiel modifiziert, aber lassen Sie mich wissen, ob das das von Ihnen beschriebene Problem ist.
Ja, das ist es... danke für die Einreichung :)
Außerdem – Chrome unter MacOS verhält sich anders... Backdrop filter wird bei der Kombination mit overflow-hidden vollständig ignoriert und daher funktioniert das Clipping korrekt :)
Vielleicht sollten Sie den Fehler selbst kommentieren... aber backdrop-filter sollte unter Chrome unter MacOS ordnungsgemäß funktionieren. Es gab einen Maskierungsfehler in Chrome 76, aber ab Chrome 77 sollte alles in Ordnung sein. Ich wäre daran interessiert zu sehen, worauf Sie sich dort beziehen.
Antwort dort mit Screenshot gesendet...