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.

  • 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

Studios

We’re a close-knit team of product designers who help businesses design for people. Since 1998, we’ve helped over 250 teams and startups get stuff done. We’ll work together to get your product or online service designed better and faster than you thought possible.

Want more?

Talk to us

Call us at (408) 341-0600

Not a big talker? Email us at [email protected]

Stay in touch

Get monthly updates from ZURB in your inbox. Read our latest news & buzz.

Get ZURBnews!
Studios Helping more than 200 startups succeed since 1998.
Foundation The most advanced front-end framework in the world.
Notable Prototype, iterate and collect feedback on your products.
University Ideas, thoughts and design resources shared with you.

© 1998–2016 ZURB, Inc. All rights reserved.

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

×