Mac OS X Dock Built Using CSS3

We featured cool CSS experiments before: iOS icons in CSS, a Kinetic type video, a 3D rotating molecules demo that works great on the iPad earlier today.

Web developer and interface designer Michael Hüneburg, rebuilt the standard OS X dock using CSS3 animation and including reflections, bounce effects, labels. He also used some additional icons inspired to the popular iTunes 10 one. Check out the experiment here.

This is a quick CSS3 experiment trying to replicate the Dock of OS X, complete with labels, animations, reflections and indicators. It uses CSS transitions for the magnification effect and the :target pseudo-class and CSS animations for the bouncing effect.

The CSS-based dock works great on Webkit desktop browsers, but you won’t able to get the magnification effect on iOS due to the obvious lack of mouseover events.