The backdrop-filter CSS property

综合技术 2018-05-16

I had never heard of the backdrop-filter property until yesterday, but after a couple of hours messing around with it I’m positive that it’s nothing more than magic. This is because it adds filters (like changing the hue, contrast or blur) of the background of an element without changing the text or other elements inside.

Take this example where I’ve replicated the iOS notification style: see how the background of each of these boxes are blurred but the text isn’t?


That’s only a single line of CSS to create that faded background effect, just like this:

.notification {
  backdrop-filter: blur(3px);
}

Now it’s worth noting that browser support for this CSS property isn’t particularly well supported just yet (see below). But we’ve been trying to do this sort of filtering stuff for a really long time and so it’s great to see that progress is being made here. Chris wrote about the “frosted-glass” technique in 2014 and way back then you had to use a bunch of weird hacks and extra images to replicate the effect. Now we can write a lot less code to get the same effect!

We also get to pick from a lot more filters than just that frosted glass style. The following demo showcases all of the backdrop-filter values and how they change the background:


Each of these boxes are just separate divs where I’ve applied a different backdrop-filter to each. And that’s it! I sort of can’t believe how simple this is, actually.

Of course you can chain them together like so:

.element {
  backdrop-filter: blur(5px) contrast(.8);
}

And this could make all sorts of elaborate and complex designs, especially if you start combining them together with animations.

But wait, why do we even need this property? Well, after reading up a little it seems that the go-to default example is a modal of some description. That’s what Guillermo Esteves was experimenting with back in 2015 :

See the Pen PwRPZa by Guillermo Esteves ( @gesteves ) on CodePen .

I reckon we can do something much weirder and more beautiful if we put our minds to it.

A note about browser support

The backdrop-filter property is not well supported at the time of this writing. And even in Safari where it is supported, you’ll still need to prefix it. There’s no support for Firefox at all. But, really, do websites need to look exactly the same in every browser?

This browser support data is from Caniuse , which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome Opera Firefox IE Edge Safari
No No No No 17 9*

Mobile / Tablet

iOS Safari Opera Mobile Opera Mini Android Android Chrome Android Firefox
9.0-9.2* No No No No No

Further reading

CSS-Tricks

责编内容by:CSS-Tricks (源链)。感谢您的支持!

您可能感兴趣的

Background image won’t show Below is the HTML and CSS code for my sidebar. The Code Stitchery Portfo...
用CSS画小猪佩奇,你就是下一个社会人!... 欢迎大家前往 腾讯云+社区 ,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ ...
网站性能优化实践总结 本文提到的网站性能指网站的响应速度,这也符合绝大部分人对于网站性能的理解:访问快速的网站性能好,反之,访问速度越慢,则网站性能越差。本文总结的优化方法是宏观的工程层面的方法,并不包含微观的语言语...
text should always be inside an image box I have an box which is an image and I have text inside the image which will be geenrated dynamically...
Combo Handler 简单实现 Web性能优化最佳实践中最重要的一条是减少HTTP请求 查看淘宝的官网会发现如下的请求 这就是Combo Handler技术,由于css,Js这类文件合并成一个只要顺序正确,那么对htm...