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


Tags: javascript,css

Problem :

enter image description here

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;
}

    CSS Howto..

    Javascript slideshow that gradually zooms on image [closed]

    How to preform whitelist-based CSS filtering in PHP

    How to get same effect as jQuery's slideToggle using CSS 3 transitions?

    How to align radio buttons inside a DIV?

    how to center align IMG in div?

    How to center image while also aligning text to the right of image?

    how to add border to image css on blogger

    How to ignore css class

    jQuery: How to change the size of a css block?

    How to add an unknown amount of dots to a line depending on length of word?

    How to add the very last border on the sub menu items

    How to move div from bottom to top

    How can I position two
    ? One from the left and one from the right of a bootstrap modal?

    How to make div's width fit content not window

    How to use ­ and the CSS “hyphens” property together?

    How to load CSS in Django templates?

    How do you create a webpage with a floating image, top left, bottom right, and with wrapping text in the middle

    Android App with HTML/CSS/jQuery. [How] Can it be done?

    How can I replicate the StackOverflow questions list format?

    How to create a WoW-like cooldown effect?

    How can I position this drupal block?

    How to Create CSS Selector Element including index

    How to apply CSS to buttons?

    How to add a close button to alertify log with CSS?

    How to edit horizantal drop down menu

    How to make an image fully flexible in terms of display size?

    how to load a css for Safari only?

    How do I keep my input fields on one line while centering the DIV that contains them?

    How to reference image locations in css asset hosted on a different domain?

    c3.js - how to show hand cursor on bar chart hover