With the advent of Microsoft's Fluent Design System and the propagation of the new Acrylic Material around the Windows ecosystem, I thought it would be great to use it in some Web layouts.
Acoording to the spec, the composition of an acrylic layer is:
So I went to try a CSS-only approach inspired by the layers in that picture, this way:
The result is really close to the spec and is also responsive, but has a big problem: just stack another .acrylic
div and the background trick doesn't work anymore.
The question is: is there some smarter way to gaussian blur without duplicating the body background for each children? Or maybe some smarter way to dinamically calculate its position?
Update
Since the backdrop-filter
CSS feature has finally shipped in Chrome 76 in July 29ᵗʰ, we have a really simplified approach to solve it, turning the original question a lot easier than it was before.
There are two ways to do this...
.acrylic
Complex implementation but runs on most modern browsers.backdrop-filter
on .acrylic
Very simple implementation but lacks browser support..acrylic
We need to duplicate bg on .acrylic
guys too, because just bringing down opacity will show the content behind them not in them, which AFAIK is not covered by blur filter...
Smart way to calc positions would be to set background-attachment: fixed
for both parent element (body
) and .acrylic
guys, this will allow you to have multiple .acrylic
guys as well ;)
Since we use same background for parent and children, we can club them together ;)
body, .acrylic::before {
background: url("IMG_URL_HERE") center/cover;
background-attachment: fixed;
}
Here is a working snippet ;)
Turned opacity on .acrylic:after
a bit down so background is a bit more visible ;)
body {
margin: 0;
font: 1em/1.4 Sans-serif;
}
body, .acrylic::before {
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
background-attachment: fixed;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.acrylic {
padding: 4em 6em;
position: relative;
overflow: hidden;
margin: 1em;
}
.acrylic::before {
filter: blur(10px);
content: "";
position: absolute;
left: -10px;
top: -10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
z-index: -1;
}
.acrylic::after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: 0.35;
border: 1px solid #fff;
background: #fff;
background-image: url(data:image/png;base64,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);
}
.shadow {
border-radius: 1px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 1px 8px rgba(0, 0, 0, 0.2);
}
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
backdrop-filter
on .acrylic
main {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.acrylic {
padding: 4em 6em;
position: relative;
background: rgba(0,0,0,0.5);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
margin: 7px;
}
body {
background: url("https://images.unsplash.com/photo-1452723312111-3a7d0db0e024?w=700") center/cover;
background-attachment: fixed;
margin: 0;
font: 1em/1.4 Sans-serif;
color: #fff;
}
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>
<main>
<div class="acrylic shadow">
Acrylic material!
</div>
</main>