It’s almost 2020, and web standards have come along more than what most people give them credit for (go forth and spread the good word to your backend friends)! 😇
While implementing my new portfolio site (www.menosketiago.com), I thought with would be cool to have a “frosted glass” effect on my modal veil instead of a duller semi-transparent fading color. Not so long ago, this was only feasible in native applications and via pre-fabricated images and trickery that was always more pain than the gain.
Alas, thanks to the CSS
backdrop-filter property, this is now rather easy to do. Unfortunately, it’s also very performance-intensive, and since I already had an animated translation on the modal, the result was a somewhat jaggy animation (due to frame drops).
While I had to skip the awesomeness to keep the site experience flawless, it got me thinking… How far could we stretch this? Can we combine it with the also recently supported CSS masks?
The answers, my hopefully full of suspense and anticipation friend, were — pretty far, and yes, we can!
What I set my eyes to recreate was the ever so trendy tilt-shift photography effect, where we blur a part of the image to simulate the feeling of a macro photo of a small scale model.
Below you can check the code and the resulting bowser rendering.
So let’s break it down…
In terms of HTML we only need a
picture tag with an
img element inside, this is just because image elements don’t allow for pseudo-elements.
The rest is just plain old CSS, dimensioning the image, absolutely positioning the
::after pseudo-element to cover the image behind it and finally applying the
mask-image with a
And that’s it, no crazy trickery involved and supported by all browsers, except for Internet Explorer (which is mostly a problem for corporate users) 😎
Buy me an oat milk latte!
Tiago Almeida is sharing Product Design knowledge and goodies
My name is Tiago Almeida. I'm a Product Designer and Illustrator born in Portugal 🇵🇹, and living the lagom life in…
The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind…