How to use css blur Filter?

Question

I want to build a blog so I should like to use a modern look. I'm very interested about a blur effect like iOS 7. I've read about filters applied to items. Well, I want to use this Filter in the menu bar (that will be fixed on top) so that the content below appears blurred. There's a way to do this with css? Or other code lenguage?

Thanks, but I don't like the alpha effect. I want to obtain a localizated real blur. — Federico Grassilli, Aug 12 '13 at 21:45
http://www.quora.com/Is-there-CSS-effect-to-blur-the-background-of-a-page — Robert Harvey, Aug 12 '13 at 21:58

score 0 · Answer 1 · answered Aug 12 '13 at 23:12

You can create a blur effect with:

<style type="text/css">
#theDiv { -webkit-filter: blur(18px); }
</style>
<div id="theDiv"></div>

but it's not very reliably supported (I think only in Chrome). there isn't an inset value that I am aware of, so you would need an event to trigger it (i.e. when another element lays on top of the div AND has a transparent, opacity, or other funky Alpha channel attribute) BUT the blur would not be confined by the overlaying elements boundaries.

How to use css blur Filter?

1 Answers1