CSS Only Tilt-shift Photography
Or a guide to being able to be as hipster with CSS as you are on Instagram 😎
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 backdrop-filter and mask-image with a linear-gradient.
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) 😎
