backdrop-filterproperty provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element’s transparency/opacity.
Have you seen Lovebird‘s top navigation? You will see blur effect to the area behind it. It’s cool right? The blur effect is introduced by iOS 7 and OS X Yosemite. Even Sketch also put it into its style panel.
Then we can create that effect by using just 3-4 lines CSS, or even 1 line CSS (if we use mixins). Webkit introduced
backdrop-filter in 2nd semester of 2015. Unfortunately until now, browser that support
backdrop-filer has some options to manipulate the area behind the element. It’s not only blur option but also you can use brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related
backdrop-filter on Codepen.
Originaly posted in Lieur’s Journal
Leave a Reply