iTunes 9 store drop down menu blur effect

Discussion in 'Design and Graphics' started by sharifi14, Sep 21, 2009.

  1. sharifi14 macrumors member

    Jun 10, 2006
    Hiya guys,

    Has anyone noticed the slight blur effect on the iTunes 9 Store main menu drop down? I've attached a picture if you haven't noticed it.

    My question is, how did Apple achieve this effect? The iTunes store looks like it's HTML-based, so I was wondering if there is a CSS rule or something to create a blur effect. I'd be interested to hear any responses! Many thanks,

    Attached Files:

  2. elppa macrumors 68040


    Nov 26, 2003
    I think the store is HTML based, but I'm not sure that top strip and menu is necessarily.

    A give-away is if you do command + shift + 4 and then hit spacebar (to bring up the screenshot camera) then it identifies the menus as separate elements.
  3. kainjow Moderator emeritus


    Jun 15, 2000
    Interesting find. I can confirm that, which means the that bar is part of the app, not part of WebKit, and so that blur is part of the OS (same blur as used by all menus and more visible in the Dock's). Most likely they are just using a Gaussian blur. Not sure if CSS provides a way to do that though.
  4. bodhi77 macrumors regular

    Sep 1, 2009
    the capital city of England: Manchester
    i'll have to experiment with different options, but i'm guessing it's javascript. easy to implement if the store is html based.
  5. elppa macrumors 68040


    Nov 26, 2003
  6. BlakTornado Guest


    Apr 24, 2007
    Washington, OH
    It's part of the app.

    Before updating to iTunes 9, I checked the iTunes store in iTunes 8 and there was no menu bar (hate to see how the iTunes Store experience is for people who haven't bothered to update!), meaning it IS part of the app, and not part of the iTunes webkit viewer.

    To further back this up, my friend also had a DNS issue which meant he could view any webpage in the iTunes store viewer, and the bar remained, no matter what site he looked at. So it's not part of the store anymore.
  7. sharifi14 thread starter macrumors member

    Jun 10, 2006
    Wow, thanks for all the replies, I didn't think there would be anyone who shared my interest in the blur effect on a drop down panel. It's really strange how the drop down menu itself is considered a different element when you go to take a screen shot of it.

    You've all done a stellar job of confirming that the iTunes 9 Store drop down menu is part of the operating system, and not simply a CSS rule. Hopefully some other inquisitive searchers will find this thread and have their questions answered!

    So just to confirm... there is no way I can create a similar blur effect for my drop down menus using CSS? I have seen hacks around the web, but they won't work if the background is dynamic like in iTunes. Cheers,
  8. elppa macrumors 68040


    Nov 26, 2003
    One more thing, I suspect we are seeing what the menus will look like (roughly) in the next release of OS X, which is sure to get a face lift.

    Apple has a solid track record of pioneering new UI ideas in iTunes and then moving them across to the rest of the operating system.
  9. shamrock593 macrumors regular

    Nov 2, 2006
    I don't think so. I've tried exporting a transparent png that's had a gaussian blur applied to it, but it just doesn't work when you plop it into your CSS (it just works like a normal transparent png). Would be awesome if it worked.

    I hope that make the iTunes scrollbars the ones that are used OS-wide.

Share This Page