Yahoo's new web mail blur effect - How?

Question

I just noticed that with the new Yahoo email interface update, they used the blur effect on the background image for one of the GUI windows. I really like this effect and previously thought it was not possible with javascript and css.

How it's done?

This is a really interesting case. When the page first loads, the full image is blurry, and if you look in the sources, you will see that there is a blurry version of the image. After the page loads, the page becomes understandable, with the exception of the GUI area, which remains blurry. Also opening chrome web tools causes the whole page background to blur again.

I still do not understand this.

Answer 1

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

So, here is how you can do this “classic” way without CSS filters - using the good old hacker hacker.

The main idea of ​​the effect is similar to the sliding window technique and sprites - in doing so, you use the css focal position to expose or hide parts of the background image.

For this effect, the structure is simple:

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

Now here is the trick:

• The main background is simply set to 0 0 . Nothing unusual.
• Inner div has x and y xy offset (through top, left or margins or padding)
• The background of the inner div uses a blurred image.
• To make the inner div look like the main background, set 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; }