iTunes 9 store drop down menu blur effect

[sharifi14]

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,

[elppa]

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.

[kainjow]

Originally Posted by elppa

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.

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.

[bodhi77]

i'll have to experiment with different options, but i'm guessing it's javascript. easy to implement if the store is html based.

[elppa]

Originally Posted by bodhi77

i'll have to experiment with different options, but i'm guessing it's javascript. easy to implement if the store is html based.

Why does the OS identify them as separate elements then? My guess is that they're not “javascript”. Everything below the menu bar is HTML/CSS/JS in a WebKit view though.

See:

http://files.willnorris.com/misc/iTunes9/response.html

and

http://willnorris.com/2009/09/itunes...th-more-webkit

for the explanation.

[BlakTornado]

Originally Posted by kainjow

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.

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.

[sharifi14]

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,

[elppa]

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.

[shamrock593]

Originally Posted by sharifi14

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,

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.

Originally Posted by elppa

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.

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