14

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.

Blurred icloud.com app icons

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).
Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
donut
  • 9,427
  • 5
  • 36
  • 53
  • 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 Oct 23 '13 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 Oct 23 '13 at 15:40
  • Added SVG filter option to my answer, this may be what they are doing. – Josh Powell Oct 23 '13 at 15:49
  • Its a cool Question, and its one of my Fav* – Dinesh Kanivu Oct 23 '13 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! http://jsfiddle.net/Josh_Powell/6G6jR/ – Josh Powell Oct 23 '13 at 16:20

2 Answers2

10

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

enter image description here

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

Andrea Ligios
  • 49,480
  • 26
  • 114
  • 243
  • Thank you! I hadn't thought of the possibility of blurring the individual icons. – donut Oct 23 '13 at 16:07
  • You are welcome. I didn't mentioned it but, after the above work, it blurs the whole page with the big blue blurred image too... – Andrea Ligios Oct 23 '13 at 16:10
  • Also, it looks like their are using a `` tag in Firefox, but in Chrome (and, likely, Safari) they are using a `
    ` with `background-image: -webkit-canvas(blurredDerivativeForButtonsc2056_at_28px)` applied.
     – donut Oct 23 '13 at 16:11
  • Uh... I browsed that mess with FireFox only. Good to know :) – Andrea Ligios Oct 23 '13 at 16:15
9

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

Josh Powell
  • 6,219
  • 5
  • 31
  • 59
  • Okay, great. Is that what is happen on [icloud.com](http://icloud.com)? Also, this [doesn't work in Firefox (jsfiddle)](http://jsfiddle.net/Lt6mP/). – donut Oct 23 '13 at 15:33
  • 4
    Regarding your portfolio: that is nice, but it doesn't work in Firefox. [icloud.com](http://icloud.com) does work in Firefox. This doesn't answer the question. – donut Oct 23 '13 at 15:38
  • Firefox has a window width greater than 768, I expect, which is an if condition in the above code. – Simon R Oct 23 '13 at 15:39
  • Sadly I didn't know it wasn't working in Firefox :/ The if statement is for mobile devices that's why it is targeting that width only when the website is on a mobile device or small. I'll remove the if statement, and I was crawling through the icloud site, I can't find anything that is showing a blur so I'll try and find how they did it. – Josh Powell Oct 23 '13 at 15:42
  • 1
    @SimonR I tested for that and [it still did not work](http://d.pr/i/mHF3) (I refreshed the page before the test). As [MDN states](https://developer.mozilla.org/en-US/docs/Web/CSS/filter#Browser_compatibility), this does not work in Firefox at this time. – donut Oct 23 '13 at 15:42
  • @JoshPowell did you try viewing the site when you're logged out? – donut Oct 23 '13 at 15:43
  • @donut I never logged in and I found them using a png background but the png has no blur, opacity, or anything to cause this effect. – Josh Powell Oct 23 '13 at 15:44
  • @JoshPowell That's very strange. What browsers have you tried this in? I've had success in the latest versions of Chrome, Safari and Firefox. Even when I've never accessed the site in the browser. Are you using a Mac, Windows or Linux? – donut Oct 23 '13 at 15:49
  • Regarding SVG: That would require `` tags on the page but there are none. – donut Oct 23 '13 at 15:53
  • At work I am using a pc and at home I use a mac so I'll check this on my mac in 30 and let you know if I find anything! SVG filters is a good option though and are pretty easy to use. – Josh Powell Oct 23 '13 at 15:54
  • @donut you don't need to use the actual file on the page you can use them as a filter through css. – Josh Powell Oct 23 '13 at 15:54
  • @JoshPowell It looks like the `` element that is referenced in `p { filter:url(#example-one); }` needs to be on the page. – donut Oct 23 '13 at 15:59
  • You have a good point there. It looks like Andrea found out how icloud does it, it is a more advance option though. – Josh Powell Oct 23 '13 at 16:04