This week's sponsor


Win more business. Get more done.

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.

Unlock MacStories Extras

Club MacStories offers exclusive access to extra MacStories content, delivered every week; it's also a way to support us directly.

Club MacStories will help you discover the best apps for your devices and get the most out of your iPhone, iPad, and Mac. Plus, it's made in Italy.

Starting at $5/month, with an annual option available. Join the Club.

A Club MacStories membership includes:

  • MacStories Weekly newsletter, delivered every week on Friday with app collections, tips, iOS workflows, and more;
  • Monthly Log newsletter, delivered once every month with behind-the-scenes stories, app notes, personal journals, and more;
  • Access to occasional giveaways, discounts, and free downloads.