This Week's Sponsor:

Incogni

Put an End to Spam, Scams, and Robocalls on Your iPhone


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.

Access Extra Content and Perks

Founded in 2015, Club MacStories has delivered exclusive content every week for nearly a decade.

What started with weekly and monthly email newsletters has blossomed into a family of memberships designed every MacStories fan.

Learn more here and from our Club FAQs.

Club MacStories: Weekly and monthly newsletters via email and the web that are brimming with apps, tips, automation workflows, longform writing, early access to the MacStories Unwind podcast, periodic giveaways, and more;

Club MacStories+: Everything that Club MacStories offers, plus an active Discord community, advanced search and custom RSS features for exploring the Club’s entire back catalog, bonus columns, and dozens of app discounts;

Club Premier: All of the above and AppStories+, an extended version of our flagship podcast that’s delivered early, ad-free, and in high-bitrate audio.