When the user is signed out of icloud 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).

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).

• javascript
• html
• css

• If you really want to use CSS for this, obviously you can as described by @Josh Powell. However, why not just use an image for maximum browser coverage? The file size on a blurred image like this is very small so that isn't too much of a concern. If you are worried about the extra request you could put it into your sprite map. – jtromans Commented Oct 23, 2013 at 15:38
• I'm well aware of these other methods that of just using CSS. However, Apple is using a different method that works in at least Safari, Chrome and Firefox. I am interested in how it this is achieved. – donut Commented Oct 23, 2013 at 15:40
• Added SVG filter option to my answer, this may be what they are doing. – Josh Powell Commented Oct 23, 2013 at 15:49
• Its a cool Question, and its one of my Fav* – Dinesh Kanivu Commented Oct 23, 2013 at 16:00
• 1 Hey mate, I know this isn't supported with firefox yet but this will show how the effect could be utilized. Enjoy! jsfiddle.net/Josh_Powell/6G6jR – Josh Powell Commented Oct 23, 2013 at 16:20

2 Answers 2

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

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