Recreating the OS X Dock

We take a basic list of links and turn them into an awesome OS X dock of icons.

Note: Demo works in Safari 4.x and Chrome 5.

The CSS

ul.osx-dock li a {
  display: block;
  height: 50px;
  padding: 0 1px;
  margin: 0;
  -webkit-transition: 0.15s linear;
  -webkit-transition-property: -webkit-transform margin;
  -webkit-box-reflect: below 2px; -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.45, transparent), to(rgba(255, 255, 255, 0.25)));
}
 
ul.osx-dock li a img {
  width: 48px;
}
 
ul.osx-dock li:hover {
  margin-left: 9px; margin-right: 9px;
  z-index: 200;
}
 
ul.osx-dock li:hover a {
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.5);
}
 
ul.osx-dock li.nearby {
  margin-left: 6px; margin-right: 6px;
  z-index: 100;
}
 
ul.osx-dock li.nearby a {
  -webkit-transform-origin: center bottom;
  -webkit-transform: scale(1.25);
}
 
ul.osx-dock li span {
 background: rgba(0,0,0,0.75);
 position: absolute;
 bottom: 80px;
 margin: 0 auto;
 display: none;
 width: auto;
 font-size: 11px;
 font-weight: bold;
 padding: 3px 6px;
 -webkit-border-radius: 6px;
 color: #fff;
}
 ul.osx-dock li:hover span {
 display: block;
}

The HTML

<ul class="osx-dock">
  <li class="active">
    <span>ZURB</span>
    <a href="http://www.zurb.com" title="ZURB"><img src="/playground/osx-dock/zurb-icon.png" /></a>
  </li>
  <li>
    <span>LinkedIn</span>
    <a href="http://www.linkedin.com" title="LinkedIn"><img src="/playground/osx-dock/linkedin-icon.png" /></a>
  </li>
</ul>

Copyright ZURB, freely available for distribution under the MIT license.

Product Design Training from the Experts at ZURB

  • ZURB Zurb icon
  • LinkedIn Linkedin icon
  • Notable Notable icon
  • last.fm Lastfm icon
  • Facebook Facebook icon
  • Google Google icon
  • Notable Notable icon
  • last.fm Lastfm icon
  • Facebook Facebook icon
  • Google Google icon

Reveal Modal Goodness

This is a default modal in all its glory, but any of the styles here can easily be changed in the CSS.

This is just a simple modal with the default styles, but any type of content can live in here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi quis sem vel enim eleifend tristique. Etiam tincidunt faucibus pharetra.

×

Log in with your ZURB ID

Log in with Google

Don't have a ZURB ID? Sign up

Forgot password?
×

Sign up for a ZURB ID

Sign up with Google

Already have a ZURB ID? Log in

×