Wednesday, August 19, 2015

WebKit Backdrop Filters

Brent Fulgham:

The User Interface design language for iOS 7 and OS X Yosemite changed to incorporate some beautiful backdrop blur effects. This layering gives a sense of depth, while preventing detail from the content underneath from cluttering the foreground.

The following image shows the WebKit media controls on top of a video. Notice that you can see some of the background content through the frosted glass effect.


Until recently, there was no standards-compliant method for producing these kinds of effects. Many designers were forced to create the illusion of blurred backdrops using pre-rendered background content and carefully clipping and positioning these assets to achieve the desired effect.

The regular system media controls respect the “Reduce transparency” setting in the Accessibility preferences pane. The WebKit background filters do not.

Comments RSS · Twitter

Leave a Comment