CODEWITHSUNDEEP
javascriptjqueryhtmlcss
anon
anon

Reputation:

BLUR a div background with opacity (page background seems blurred through div)

My plan is to take the Windows 7 UI, and recreate it using CSS3. I've already done it with the 98 theme, but I want to be able to change stylesheets.

The problem arises when I need to blur the background image with low opacity. Is this even possible? Seen below: Example here:

It's hard to explain, but I'm going to give it some minimal capabilities (draggable, resizeable etc) So I can't do the two background hack.

Is this possible with jQuery or something similar?

http://jsfiddle.net/BeauAugust/AZRHC/ an example

Upvotes: 2

Views: 7140

Answers (1)

David Mulder
David Mulder

Reputation: 26985

Ok, there is a single way which works for element's in the background and doesn't require manual reconstruction on canvases... only one problem: it's firefox only for now :P (although webkit has a bug to add it as well and it's awaiting standardization).

Either way, if you want to see an aero implementation of this technique check this out (in firefox): https://developer.mozilla.org/en-US/demosdetail/aero-windows/launch (I made it, so if you have any questions feel free to ask).

The trick is using -moz-element as a background and next a svg filter to blur the background (svg filters can be applied to elements in new browsers).

Either way, except for a proof of concept, the blurring isn't realistically possible.

Upvotes: 1

Related Questions