Backdrop Filter-Effekt mit CSS

Ich liebe diese kleinen Beiträge, bei denen ein knifflig aussehendes Design mit einer einzigen Zeile CSS gelöst wird, die eine wenig bekannte Eigenschaft verwendet. In diesem Fall ist das Design ein Frosted-Glass-Effekt und die CSS-Eigenschaft ist backdrop-filter.

Der Ansatz? Kinderleicht

.container {
  backdrop-filter: blur(10px);
}

Die Kommentare im Beitrag sind es wert, angeschaut zu werden, da sie die Cross-Browser-Unterstützung behandeln. Die Abdeckung ist tatsächlich ziemlich gut. Caniuse zeigt eine globale Abdeckung von 83 %, wobei Firefox (und, vorhersagbar, Internet Explorer) keine Unterstützung haben. Ein Kommentator bot einen schönen Fallback an, zusammen mit einem kleinen Kniff, der den Effekt entsättigt.

.container {
  background: rgba(0,0,0,0.8);
  backdrop-filter: saturate(180%) blur(10px);
}

Schön. Aber wir können noch einen Schritt weiter gehen, indem wir @supports einstreuen, wie in unserem Almanac-Eintrag zu background-filter gezeigt.

.container {
  background: rgba(0,0,0,0.8);
}

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

Beachten Sie das -webkit-Präfix. Es lohnt sich immer noch, es in der Produktion zu verwenden, obwohl das keine große Sache ist, wenn Sie mit Autoprefixer ausgestattet sind. Hier ist die Demo aus dem Almanac.

Okay, vielleicht nicht die Ein-Zeilen-Lösung, als die sie erschien. Aber hey, es ist cool, dass diese Art von Dingen in CSS relativ trivial ist.

Direkter Link →