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.

an "easy way" is coming, maybe, http://caniuse.com/#search=backdrop-filter — Jaromanda X, Sep 05 '17 at 06:13
but, IE - you have two chances, buckleys and none - IE is dead dead dead — Jaromanda X, Sep 05 '17 at 06:14
IE is old and not developed, so any new CSS (and even old CSS) just does not, and will never, work - having said that, IE may work with `-ms-filter` — Jaromanda X, Sep 05 '17 at 06:32

MarioE · Answer 1 · 2017-09-05T07:15:27.257

0

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.

edited Sep 05 '17 at 07:15

answered Sep 05 '17 at 06:53

MarioE

174
9

Well, assuming the navbar blurs the background in the example you provide - what if the image behind the blurred div element is a responsive image? Will the blur effect still work? I ask because I do not understand your link. I am not comfortable with "...JavaScript, the Canvas API and the DOM API." That's why I am posting. Thx for the feedback. – No-U-Turn Sep 05 '17 at 06:59
1

Wow, it works in the example! Good job! What search terms did you use to find this answer? Also, I voted you up. It won't show since this was my first post! Damn man, I can't believe you found the answer! I am a happy person now! – No-U-Turn Sep 05 '17 at 07:26
@No-U-Turn "js realtime blur effect" as simple as that :) – MarioE Sep 05 '17 at 07:32
After studying all the links, this is what I need: http://jsfiddle.net/kmxD3/1/ Only this example works with Firefox, and not IE. I will research more tomorrow, need sleep now. Thx again ppl! – No-U-Turn Sep 05 '17 at 08:10
It does work for chrome too. As you can see from http://caniuse.com/#feat=css-filters, filter does not work for IE – MarioE Sep 05 '17 at 08:30

Re-Creating Aero Glass for Bootstrap

1 Answers1