Re-Creating Aero Glass for Bootstrap

Question

So, this concept is simple, but the code is complicated...

Here's a partial example - look at the navbar on this site: navbar aero glass example It is just a DIV with a tiled background with maybe a 50% opacity.

Now, to get the full aero glass effect, we need to blur whatever is behind this DIV / navbar. So, in this example, the navbar needs to blur the underlying DIV background image. This is what confuses me.

The closest thing I could find to a blur filter was this:

img {

-webkit-filter: blur(5px); /* Safari 6.0 - 9.0 */
filter: blur(5px);

}

But the above only works for the image element for Firefox and not IE.

Basically, I need a way to create a DIV, and blur whatever is behind that DIV element, and have it work for all browsers.

Thx in advance.

Answer 1

You could screenshot your page into a canvas.
Example: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas

Then blur the canvas and clip it with a div. The problem is that you need to refresh the screenshot in order to give the look of a real-time blurry effect (Which is VERY slow and is going to lag most of your visitors).

This could help you: https://github.com/keithwhor/canvasBlurRect

EDIT An answer here https://stackoverflow.com/a/18969917/7090648 (tagged) does what you want.