Aux

Web page blur with CSS and a bit of JavaScript

Monday, October 26, 2009 3:58:53 PM

tutorial, programming, development, opera, css, safari, html, ff, browsers, javascript, chrome, tricks

Actually, you can't really blur web page in any browser except for IE6/7 - there is NO way to blur web page with CSS/JavaScript and even Canvas tag will NOT help. Too bad...

But I've found a workaround which will do the job just fine for some cases. My method adds CSS3 text-shadow property to blurred elements with the same color as text color is. Then text color "blurred" a bit to the background color. The last thing left is to find all IMG tags, replace them with Canvas, draw and blur these images inside canvas. I did not do the last step because there are plenty of code for that in Google.

Oh, and the result! Here it is (: Visit the page with Opera/Chrome/FF/Safari, click on the text, enjoy the sources!

The Pirate Bay appeal is postponedLatvian RIAA/MPAA analogue is dismissed

Comments

Lorenzo CelsiLorenzoCelsi # Friday, November 13, 2009 10:28:18 AM

Technically it is interesting but I find the resulting effect quite annoying for the reader, it makes your eyes try to focus the blurred text instinctively and diverts attention away from the pop-up over it, which is also difficult to read because of the blurred background. From the usability point of view I guess this "effect" it is a counter productive overkill.