How is the signed out blur effect achieved on icloud.com?

Question

When the user is signed out of icloud.com it shows the "app" icons blurred behind the modal sign in box. If you resize the browser the icons will move around behind the blur filter. When you sign it, the blur animates away.

I've looked through the source but cannot figure out how this blur effect is achieved. Immediately, I suspected the CSS filter property but I can't find it in the CSS. Also, this works in Firefox which, according to MDN, it should not.

The only lead I have is that the effect it's likely applied to the #sc1095 element, the parent of the icons.

Clarification

Apple's solution is unique for the following reasons:

• It works in Firefox.
• It doesn't rely on a pre-generated background image.
• It can be animated (using transition, presumably).
• It doesn't look to be using <svg> (there are no <svg> tags on the page).

Answer 1

It uses (for each image) an hidden <img/> with the blur, an hidden <img/> with the icon, and a visible canvas in which they're drawn.

Look in the (generated, then with FireBug) source for

<a style="left: 140px; width: 142px; top: 129px; height: 142px; z-index: 15; -moz-transform: scale(1)" class="atv4 sc-view springboard-button-view escapes-gpu-disabled" id="sc2301" href="#mail" tabindex="0" role="button" aria-labelledby="sc2301-label">

and you will find inside it (at bottom) the base64 blurred image:

<img class="sb-shadow sb-el" style="height: 204px; width: 204px; left: -31px; top: -17px; opacity: 0; display: none;" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAABzElEQVR42u3a3Y6DIBCG4f6IUpEF3b3/a10OTD7DaKYMtc5uNXnPNuk+AdIKXCqe627t/FwVtBvittK9ohuNR8kR/D/eSOOAchSPaFJmUfvCzKKGQ0kg9wzRvjGgUqUgOiKAtKnugFqA6AhVQ/SDtiHmUAgyWyBmVAjEKoiC6OjQUckWu1VUCxAZHYIh60QVhq4fHpONykNPGB0Gs7pWHtraXjv8FOsVYuzWVOOmWK8uYAyLyaaYUwZxmGoCjMJ4DF38+jFYNx+IGbQlwVjlGCvFeC2dmAzzpaUT858xQUsnJsNELUkxnXJMV4MZFVSNccowjsGQ9xm1GPnLGV6bQ2pSUMBrMzClewBeCcZL9gCwO4OpFlLfBxYwxZiNQIKh68an4kGQOH++e2bfjJ9q+I0WU9ObEFMq4jcZN8Xw8FMNoJAaF6iflwXEmArz53lmihWfAvQroAhUqnYUgIgrkJ47BSg6n8lGyGcoVPjdgQhiwIiUnc9c2CNAgPolCrDqfIboAWGOAgvPNM0KCjA0CHJzAFCE4c40RSCgZhhwtVkAZoQUwt8DAIrAaJYPf78OAAIBgmpvaCCzQw1ibmh80N0Z/beazvtmf/Em4C+GnVIq6T5d5wAAAABJRU5ErkJggg==">

then the icon image:

<img src="/system/cloudos/1T.111208/en-us/source/resources/images/mail_icon.png" class="sb-icon sb-el" style="height: 142px; width: 142px; display: none;">

and finally the canvas:

<canvas height="54" width="54" style="height: 216px; position: absolute; top: -37px; left: -37px; width: 216px;" aria-hidden="true"></canvas>

Change display: none; to display: block; on the images to show them.

You may wanna take a tour on HTML5 Canvas Tutorial

Answer 2

This is what I did on my portfolio for the mobile nav view.

Effect with CSS blur <= I made a fiddle to show how the effect of a CSS Blur could work.

jQuery

$('.yourBtn').on('click', function() {
   $('#yourID').toggleClass('blur');
});

CSS

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

This line: $('.max, .mainContainer').toggleClass('blur'); is targeting everything but the header/nav to add the blur effect.

If you go to my portfolio, change the browser width to make it change and then refresh for the jQuery since I don;t have it set up on resize.

Port

SVG filters

Here is a website on how to use the SVG blur effect in Firefox and all browsers.

I also have this fiddle I saved with a grayscale filter to show how each browser needs to display it.

SVG Blur

SVG Gray scale for each browser