HTML5 CSS3/Javascript Blur Mask

Question

There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.

We need an Opacity mask, rounded borders, and a Blur...

We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.

I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...

Basically, we want a Div to act as a Blur Mask over other contents...

If someone actually succeeded with this, i'll be glad to know its possible :) Thank you

Answer 1

Thought this could be relevant: Aero

Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.

Answer 2

http://t.co/fFLPKnzC

very good article on blur showing the state of the art

sadly "masking" parts of your page, that blur everything behind, is not that easy. maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..

therefor to embedd html within svg and use svg-filters on html elements later on

Answer 3

There is no way to do this efficiently or cross-browser at the moment.

The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.