Dock-style zooming icon bar in pure HTML+CSS

Update: The initial post mentioned transforms, which were used in the initial version, but later replaced by simple absolute positioning.

Demo

An OSX-style icon bar in pure CSS, without any Javascript. Not much to say except: Enjoy ๐Ÿ™‚

This sample uses CSS transitions, meaning that it requires a Firefox 4 preview build.

Webkit manages to do … something (Webkit tries to do some transitions in sequence instead of simultanously). Opera apparently has no support for pointer-events in HTML yet.

Try to disable the stylesheet (View/Page Style/No Style in Firefox): The document remains usable. Ugly, but usable.

2 thoughts on “Dock-style zooming icon bar in pure HTML+CSS”

Leave a Reply

Your email address will not be published. Required fields are marked *

*