OS X Dock built using CSS 3, new iTunes style app icons
Web developer Michael Hüneburg has been experimenting recently with the new capabilities enabled by the latest version of the cascading style sheets standard, CSS3. Among other things, CSS3 now offers the ability to create animations triggered by a mouse over or click. Hüneburg used those features to code a replica of the Mac OS X dock.
Hüneburg has posted his example on his site where you can see that it does the same sort of magnification and bouncing icons as the Apple original. The full animation capability requires HTML5 support so it works in Webkit browsers like Safari and Chrome. Firefox versions 3.6 and 4 still don't fully support CSS3, so the magnifications work but not the icon bounce. While this is an interesting experiment, it also shows some of where browser-based applications might be able to go in the future.
In addition to the animations, Hüneburg has also created new icons for Dashboard, Mail, iCal and Address book in the same style as the new iTunes icon. While this adds some uniformity, it also makes it harder to distinguish the apps at a glance. What do you think?
[via Macstories]
Share
Categories
Web developer Michael Hüneburg has been experimenting recently with the new capabilities enabled by the latest version of the...
Add a Comment
why would you want to make your doc look like that p.o.s. of an icon. gahhh. itunes 10 logo is dreadful.
November 03 2010 at 4:39 PM Report abuse Permalink rate up rate down ReplyIf only iTunes launched that fast … :)
November 03 2010 at 3:16 PM Report abuse Permalink rate up rate down ReplyI did the mac fan effect in CSS a while ago: http://phosphorus.co/2010/08/osx-fan-effect-using-css3-animations/
November 03 2010 at 2:57 PM Report abuse Permalink rate up rate down ReplyWhy does it seem that no designer understands that if you make all the icons in the Dock have the same color and shape, it completely defeats the purpose of using icons rather than text? Icons are good for quick identification, because you can use size, shape, color, and design to determine what it is.. if they're all very similar, then it will take you much longer to determine what an icon actually means
November 03 2010 at 2:04 PM Report abuse Permalink rate up rate down ReplyHey, thanks a lot for the article!
I'd like to tell you a few things about the icons. Originally I planned to write an article about the UI changes Apple introduced with the latest iTunes update.
In order to explain why too much uniformity is a bad thing I took the iTunes 10 icon, recreated it for other applications and put them into a dock I built in HTML. After I got kind of stuck while writing the article I released the CSS experiment separately and kept the icons.
In retrospective that was a bad decision because it seems that the icons are quite a distraction from the actual content. I guess I'll change them in the near future.
Thanks for reading, have a nice day you all!
That makes a lot more sense. Thanks for explaining, and wonderful job on the dock! I did notice that your site's navigation menu flickers whenever one of the icons is clicked, though — I'm using Safari 5.0.2 on OS X 10.5.8.
November 03 2010 at 2:18 PM Report abuse Permalink rate up rate down ReplyI stopped using a monochrome Mac in 1992. Then iTunes got updated and took all my beautiful colors away.
November 03 2010 at 1:35 PM Report abuse Permalink rate up rate down ReplyIt's been done. I was just looking at this the other night, complete with cut-and-paste source: http://www.zurb.com/playground/osx-dock?
November 03 2010 at 1:33 PM Report abuse Permalink rate up rate down ReplyI like having the uniform style of the icons, just change the colors!
November 03 2010 at 1:26 PM Report abuse Permalink rate up rate down ReplyGood work by the designer, but I REALLY hope Apple doesn't start using this style of icons. The new iTunes icon is terrible.
Either way, I suppose it doesn't matter, as we can modify them, but it just looks so crummy.
Very cute work by Michael - lets hope that Apple doesn't go down this path with its icons - they look a little too uniform and corporate for my taste.
November 03 2010 at 1:11 PM Report abuse Permalink rate up rate down ReplyDeals of the Day
more deals- Cases for New iPad at HandHeldItems: Extra 20% off, $2 credit, from $3 + $3 s&h
- $15 Apple iTunes Gift Card for $8 for new Saveology customers
- Philips Fidelio Docking Speaker Station for iPhone / iPod for $38 + $6 s&h
- Retro 80's Case for iPhone for $11 + $2 s&h
- HHI 360 Dual-View Stand Case for new iPad w/ $2 credit for $12 + $3 s&h
- HHI ReElegant Smart Cover Companion Case for new iPad from $5 + $3 s&h
Software Updates
more updatesFeatured Stories
more stories
Popular Stories
TUAW (or The Unofficial Apple Weblog) is a website devoted to tips, reviews, news, analysis and opinion on everything Apple.
16 Comments