CSS or JavaScript Div Blur magic

Question

Okay, so a new version of the iCloud website is out. It has what appears to be some crazy voodoo Apple magic going on. They were able to blur the background icons behind the login screen, and I can't figure out how they did it. It's not a static image, as the icons change size if you resize the browser.

Would someone please explain?

https://www.icloud.com/

Answer 1

They are using a canvas and sets it as a background image

/* from the page: */
background-image: -webkit-canvas(blurredDerivativeForButtonsc245);

you can do all the blurring on the canvas content.

Answer 2

I think you can implement using css! please check out

http://www.w3schools.com/svg/svg_fegaussianblur.asp

You can use alot of different filters by declaring them like

<filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
</filter>

these can be black and white filters, cyanotype etc. From there just reference it on the object using filter='url(#f1)'

EDIT

CAN BE DONE USING BLUR CSS

http://jsfiddle.net/SvH6w/6/

Answer 3

You could possibly do it using BlurJs , check out the demo: http://www.blurjs.com/simpledemo.html