frosted glass
More than once, I’ve looked for a way to execute a frosted glass appearance (a la iOS 7) in HTML5 without the need for JavaScript, extra markup, or a duplicate, blurred background image. I just recently wanted to do this again, and noticed someone doing something similar using psuedo-elements. It turns out it’s possible to do with filters (presently only in WebKit), so I took another crack at it, and here is the JSFiddle:
It’s far from perfect. How blurs are executed by CSS filters solicited some tricks to make them completely fill the background, and a trained eye will see some bleed on the edges. If you were to try different border sizes, etc. You would likely want to fudge with the numbers a bit to get appropriate coverage for the blur effect.
Let me know if you use this somewhere, I’d love to see it in action.
Update: It looks like you’ll be able to accomplish this effect with no tricks before too long.