Search code examples
javascriptcssicloudblurry

CSS or JavaScript Div Blur magic

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/

Solution

  • 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/