Blurring page elements

[ShadowMage]

Hi guys, is there a good, cross-browser technique to blur elements on a page?The situation is this:I have a custom alert box that creates a gray overlay on the page. What I'd like to do is make everything beneath this overlay go blurry.I've searched Google, but it seems that the only solutions involve images or are proprietary. Is this at all possible?

[Ingolme]

There's no way to make things blurry in HTML or CSS. The best you can do is load an image that looks like the page but blurry.

[ShadowMage]

There's no way to make things blurry in HTML or CSS. The best you can do is load an image that looks like the page but blurry.

Hmm...bummer...I was afraid of that. :)Oh well......thanks, Ingolme.

[jeffman]

Off the top of my head, I wonder what would happen if you overlay a .png that has varying levels of transparency in random-seeming places and shapes.

[ShadowMage]

Off the top of my head, I wonder what would happen if you overlay a .png that has varying levels of transparency in random-seeming places and shapes.

Hmm...Yeah, that's an interesting thought. I'll give it a shot and see what happens.EDIT: It does kind of work. With a little more tweaking it might be ok. Thanks for that, DD!

[jeffman]

Cool. I haven't had a chance myself to try it out. What I thought I would (PhotoShop, right?) do is start with a transparent area. Then I'd set my paintbrush to bigger and smaller radii and draw black circles with different levels of opacity. They'd be overlapping and next to each other. Then I'd Gaussian blur the whole thing till it was hard to know what the original looked like.What'd you do?

[ShadowMage]

Cool. I haven't had a chance myself to try it out. What I thought I would (PhotoShop, right?) do is start with a transparent area. Then I'd set my paintbrush to bigger and smaller radii and draw black circles with different levels of opacity. They'd be overlapping and next to each other. Then I'd Gaussian blur the whole thing till it was hard to know what the original looked like.What'd you do?

I used GIMP. I started with a bunch of vertical gray lines on a transparent canvas, set the opacity, duplicated the layer, rotated it 90 degrees to create a sort of hashed look, set the opacity to something else, and voila.It was a very quick test, and it seemed like it worked at least a little bit. I'll play with it more today to see if I can get a better effect. I'll try your method (with the circles) to see what I can do with it, too.

[jeffman]

FWIW, I gave the plan a try. It really doesn't resemble a blur, but it might accomplish what you want. Don't know.

[ShadowMage]

FWIW, I gave the plan a try. It really doesn't resemble a blur, but it might accomplish what you want. Don't know.

No, it's not really a blur, per se. But it does kind of smudge things up a little. Only problem is, I have a lot of white background on the page and it looks kinda funny on white. If it were a darker or busier page it might work a little better (perhaps a little less transparency too). What kind of page did you test this on?I think I'll go back to using a plain old gray..... :)It was great idea though, and like I said, it might work better on busier pages. I'll keep this trick in mind if they don't come out with something in CSS before I get working on my other project.

[End User]

Just for fun, I tried to make a "blur" overlay and it wasn't too hard. I started with a uniform light gray background (800*800) and fiddled with the noise, blur, and opacity settings. I added some speckling with the airbrush tool and then used the smudge/smear tool to smooth things out a bit. All in all it worked far better than I would have thought.

[ShadowMage]

Just for fun, I tried to make a "blur" overlay and it wasn't too hard. I started with a uniform light gray background (800*800) and fiddled with the noise, blur, and opacity settings. I added some speckling with the airbrush tool and then used the smudge/smear tool to smooth things out a bit. All in all it worked far better than I would have thought.

Hmm...interesting. What kind of page did you test this on though? Simple text on a white background? Or something busier?

[thescientist]

Shadow or DD, can you post a link with a test implementation of this effect? I'd like to see it in action for the full effect.

[ShadowMage]

Shadow or DD, can you post a link with a test implementation of this effect? I'd like to see it in action for the full effect.

I can't post a link since this is on a live site but I can attach a screen shot.This is my latest attempt: (ignore the faulty tiling, I don't have that fixed yet. )< How the heck do I attach pics?!? >Well, anyway here's a link to the image on image shack:http://img704.imageshack.us/i/scrnshot.gif/Here's an updated one:http://img831.imageshack.us/i/scrnshot.jpg/

[thescientist]

what is getting the transparency applied to it?

[ShadowMage]

what is getting the transparency applied to it?

The gray, fuzzy-looking background. I've tried it using opacity in the image and in CSS, it doesn't seem to make any difference. I still think it would work better if the background wasn't white and the page was a little busier, so I'm going to try it on my other project when I get a chance. I'll put up an image of that when I get it done.

[thescientist]

so are you just adjusting the background of that form/page using Javascript? or is it something else?

[ShadowMage]

so are you just adjusting the background of that form/page using Javascript? or is it something else?

It's an overlay. Here's the html:

<!-- Custom alert box --><div id='custom_dialog' class='custom_dialog'>	<div class='custom_dialog_overlay'></div>	<div class='custom_dialog_container'>		<div class='custom_dialog_shdw'></div>		<div class='custom_dialog_title'></div>		<div class='custom_dialog_content_wrap'>			<div class='custom_dialog_content'></div>			<button class='custom_dialog_btn'>OK</button>		</div>	</div></div><!-- End custom alert box -->

The 'custom_dialog_overlay' class is a fixed position div with height/width set to 100% and the repeating gray image as the background. By default, the display is set to none in the CSS, and when I need to trigger an alert, I modify the necessary components and set display to block with JavaScript. I'm not manipulating anything except the innerHTML of the content div and the display. (And events on the button)

[thescientist]

got it. neat-o.

[End User]

Hmm...interesting. What kind of page did you test this on though? Simple text on a white background? Or something busier?

I overlaid it on top of a page that had both text and graphics; the page itself had a white background.