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