Web page blur with CSS and a bit of JavaScript
Monday, 26. October 2009, 15:58:53
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!
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!
-logo-2008.png){kind=logo}
(40%)
WIDGETIZE