I want an Vista/7-aero-glass-style effect on a popup on my site, and it needs to be dynamic. I'm fine with this not being a cross-browser effect as long as the site still works on all modern browsers.
My first attempt was to use something like
The only way (so far) of having a blur effect in the background without js plugins, is the use of
-moz-element() property in combination with the
svg blur filter. With
-moz-element() you can define an element as a background image of another element. Then you apply the
svg blur filter. OPTIONAL: You can utilize some jQuery for scrolling if your background is in
I understand it is a quite complicated solution and limited to FF (
element() applies only to Mozilla at the moment with
-moz-element() property) but at least there's been some effort in the past to implement in webkit browsers and hopefully it will be implemented in the future.