Ich hatte gestern noch nie von der Eigenschaft backdrop-filter gehört, aber nachdem ich ein paar Stunden damit herumgespielt habe, bin ich sicher, dass sie nichts weiter als Magie ist. Das liegt daran, dass sie Filter (wie das Ändern von Farbton, Kontrast oder Unschärfe) auf den Hintergrund eines Elements anwendet, ohne den Text oder andere Elemente im Inneren zu verändern.
Nehmen Sie dieses Beispiel, in dem ich den iOS-Benachrichtigungsstil nachgebildet habe: Sehen Sie, wie der Hintergrund all dieser Boxen unscharf ist, der Text aber nicht?
Das ist nur eine einzige Zeile CSS, um diesen ausgeblendeten Hintergrundeffekt zu erzeugen, genau wie dieser
.notification {
backdrop-filter: blur(3px);
}Nun ist es erwähnenswert, dass die Browserunterstützung für diese CSS-Eigenschaft noch nicht besonders gut ist (siehe unten). Aber wir versuchen schon seit langem, solche Filtereffekte zu erzielen, und es ist großartig zu sehen, dass hier Fortschritte gemacht werden. Chris schrieb 2014 über die „Milchglas“-Technik und schon damals musste man eine Reihe seltsamer Hacks und zusätzliche Bilder verwenden, um den Effekt nachzubilden. Jetzt können wir viel weniger Code schreiben, um den gleichen Effekt zu erzielen!
Wir können auch aus viel mehr Filtern wählen als nur dem Milchglas-Stil. Die folgende Demo zeigt alle backdrop-filter-Werte und wie sie den Hintergrund verändern
Jede dieser Boxen sind nur separate divs, auf die ich einen anderen backdrop-filter angewendet habe. Und das ist alles! Ich kann ehrlich gesagt kaum glauben, wie einfach das ist.
Natürlich kann man sie auch miteinander verketten, so
.element {
backdrop-filter: blur(5px) contrast(.8);
} Und das könnte zu allerlei aufwendigen und komplexen Designs führen, besonders wenn man sie mit Animationen kombiniert.
Aber warten Sie mal, warum brauchen wir diese Eigenschaft überhaupt? Nun, nach einigem Lesen scheint das Standardbeispiel ein Modal irgendeiner Art zu sein. Damit hat Guillermo Esteves 2015 experimentiert experimentiert
Siehe den Stift PwRPZa von Guillermo Esteves (@gesteves) auf CodePen.
Ich schätze, wir können etwas viel Seltsameres und Schöneres machen, wenn wir uns darauf konzentrieren.
Eine Notiz zur Browserunterstützung
Die Eigenschaft backdrop-filter wird zum Zeitpunkt des Schreibens nicht gut unterstützt. Und selbst in Safari, wo sie unterstützt wird, müssen Sie sie immer noch mit einem Präfix versehen. In Firefox gibt es überhaupt keine Unterstützung. Aber mal ehrlich, müssen Websites in jedem Browser exakt gleich aussehen?
Diese Browserunterstützungsdaten stammen von Caniuse, wo weitere Details zu finden sind. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version und aufwärts unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 76 | 103 | Nein | 17 | 9* |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 9.0-9.2* |
Ja! Ich bin vor einiger Zeit darauf aufmerksam geworden. Glücklicherweise in Chrome hinter dem experimentellen HTML-Feature-Flag verfügbar, sodass ich damit herumspielen kann.
Großartige Funktion, hoffentlich erhält sie mehr Unterstützung, damit wir sie tatsächlich nutzen können.
Jeder, der möchte, dass diese Funktion implementiert wird, kann helfen, indem er dieses Problem auf den Chromium-Bug-Seiten mit einem Stern versieht
https://bugs.chromium.org/p/chromium/issues/detail?id=497522
Sie sagten, dass sie sich zuerst auf die am meisten bewerteten Probleme konzentrieren, daher würde es helfen, schneller in Chrome aufgenommen zu werden.
Es ist cool, aber die gleichen Effekte können mit einem Wrapper-Element und der CSS-
filter-Eigenschaft nachgebildet werden, die eine viel bessere Browserunterstützung hatHier dasselbe! Ich nutze diese Funktion viel als progressive Verbesserung zusammen mit @supports.
Polyfill: https://github.com/AhsanE/backdrop-polyfill-chrome
Wie bei vielen dieser Effekte werden sie wahrscheinlich aus der Mode sein, wenn wir eine breite Browserunterstützung haben. Bis dahin wird etwas Sexeres und technologisch Unerreichbares auftauchen.
Danke fürs Teilen! Ich versuche, backdrop-filter in meinen Codepen zu integrieren. Ich habe versucht, Ihren Codepen zu referenzieren, aber es scheint, als würden die Filter dort nicht angewendet. Wissen Sie, warum das so sein könnte? Ich bin ein Anfänger, daher ist es für mich nicht offensichtlich.