Yahoo's new blur effect in web mail - How?

Tags: javascript,css

Problem :

I've just noticed that with Yahoo's new email interface upgrade, they've used a blur effect on the background image for one of the GUI windows. I really like this effect and previously thought it to be completely impossible with javascript and css.

How is this done?

THis is actually an interesting case. When the page first loads, the full image is blurry, and if you look in the sources, you'll see that there is a blurry version of the image saved. After the page loads, the page goes clear excluding the GUI area which stays blurry. Also opening chrome web tools causes the entire page background to go blurry again.

I still haven't figured this out.

---

Solution :

In the comments people mention CSS3 blur filter. But, you mention that Yahoo serves two versions of the image - blurred and non-blurred. The reason for the 2 images is that they probably implemented it without using CSS3 blur filter (or at least have a fallback for browsers that don't support blur filters). You could have implemented this effect way back in 1999.

So, here's how you can do it the "classic" way without CSS filters - using good old CSS hackery.

The basic idea for the effect is similar to the sliding window technique and sprites - whereby you use css background positioning to expose or hide portions of the background image.

For this effect, the structure is simply:

 ______________________________________
| main background image                |
|                                      |
|    _____________________             |
|   | inner div with      |            |
|   | blurry background   |            |
|   | image               |            |
|   |                     |            |
|   |                     |            |
|   |_____________________|            |
|                                      |
|______________________________________|

Now, here's the trick:

1. The main background is simply set at 0 0. Nothing unusual
2. The inner div has x and y offset of x y (via top,left or margins or padding)
3. Background of the inner div uses the blurry image.
4. To make the inner div look like part of the main background set the background-position to -x -y

Simple example

#main {
    position: absolute;
    background: url("background.jpg");
}
#inner {
    position: absolute;
    left: 20px;
    top: 30px;
    background: url("blurry_background.jpg") -20px -30px;
}