{"id":1325,"date":"2020-08-14T13:20:15","date_gmt":"2020-08-14T13:20:15","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=1325"},"modified":"2020-08-14T13:20:15","modified_gmt":"2020-08-14T13:20:15","slug":"backdrop-filter-effect-with-css","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=1325","title":{"rendered":"Backdrop Filter effect with CSS"},"content":{"rendered":"\n<p>I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is&nbsp;<code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/b\/backdrop-filter\/\">backdrop-filter<\/a><\/code>.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/js572vt4pnpd3yqc7t7x.png.jpeg?ssl=1\" alt=\"\" class=\"wp-image-317286\"\/><\/figure>\n\n\n\n<p>The approach? Easy peasy:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  backdrop-filter: blur(10px);\n}<\/code><\/pre>\n\n\n\n<p>The comments in the post are worth looking into because they address cross-browser support. Coverage is actually pretty good.&nbsp;<a href=\"https:\/\/caniuse.com\/#feat=css-backdrop-filter\">Caniuse shows 83% global coverage<\/a>&nbsp;with Firefox (and, predictably, Internet Explorer) lacking support. One commenter offered a nice fallback, along with a small tweak that desaturates the effect:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  background: rgba(0,0,0,0.8);\n  backdrop-filter: saturate(180%) blur(10px);\n}<\/code><\/pre>\n\n\n\n<p>Nice. But we can take it a little further by sprinkling&nbsp;<code>@supports<\/code>&nbsp;in there, as demonstrated in our&nbsp;<code>background-filter<\/code>&nbsp;Almanac entry:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.container {\n  background: rgba(0,0,0,0.8);\n}\n\n@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {\n  .container {\n    -webkit-backdrop-filter: blur(10px);\n    backdrop-filter: blur(10px);\n  }\n}<\/code><\/pre>\n\n\n\n<p>Notice the&nbsp;<code>-webkit<\/code>&nbsp;prefix in there. It\u2019s still worth using it in production, though that\u2019s not a big deal assuming you\u2019re wired up with Autoprefixer. Here\u2019s the demo from the Almanac:<\/p>\n\n\n\n<figure><iframe src=\"https:\/\/codepen.io\/anon\/embed\/PwRPZa?height=450&amp;theme-id=1&amp;slug-hash=PwRPZa&amp;default-tab=result\" height=\"450\" allowfullscreen=\"\"><\/iframe><\/figure>\n\n\n\n<p>OK, so maybe not the one-line solution it appeared to be. But hey, it\u2019s cool that this sort of thing is relatively trivial in CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I love these little posts where some tricky-looking design is solved by a single line of CSS using a little-known property. In this case, the design is a frosted glass effect and the CSS property is&nbsp;backdrop-filter.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[30],"tags":[105],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1325"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1325"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1325\/revisions"}],"predecessor-version":[{"id":1326,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/1325\/revisions\/1326"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1325"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1325"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1325"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}