Das Mac OS X Dock mit CSS3 imitieren

Die Navigation hier auf meiner Website ist unverkennbar dem Mac OS X Dock nachempfunden. Den bekannten und beliebten Vergrößerungseffekt des Docks wurde hier komplett in CSS3 umgesetzt.
Einiges, wofür man bisher Javascript bemühen musste, lässt sich in Zukunft auch mit CSS3 umsetzen. Das Dock funktioniert am besten mit den aktuellen Webkit-Browsen wie z.B. Apple Safari oder Google Chrome.

Viel Spass beim Experimentieren!

Example

Example zum Downloaden:
CSS3-Dock.zip

HTML:

<div id=”dock”>
 <div class=”left”></div>
 <nav id=”docknav” role=”navigation”>
 <ul>
 <li>
 <a href=”#”><span>Icon 1</span><img src=”img/herz.png” alt=”Icon 1″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 2</span><img src=”img/herz.png” alt=”Icon 2″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 3</span><img src=”img/herz.png” alt=”Icon 3″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 4</span><img src=”img/herz.png” alt=”Icon 4″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 5</span><img src=”img/herz.png” alt=”Icon 5″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 6</span><img src=”img/herz.png” alt=”Icon 6″></a>
 </li>
 <li>
 <a href=”#”><span>Icon 7</span><img src=”img/herz.png” alt=”Icon 7″></a>
 </li>
 </ul>
 </nav>
 <div class=”right”></div>
</div>

CSS:

div#dock { 
 display: inline-block; 
} 

div#dock div.left { 
 background: url(img/dock-bg-left.png) no-repeat bottom; 
 float: left; 
 width: 17px; 
 height: 130px; 
} 

nav#docknav { 
 background: url(img/dock-bg-center.png) repeat-x bottom; 
 float: left; 
 height: 130px; 
 overflow: hidden; 
 text-align: left; 
 padding: 0 10px; 
} 

div#dock div.right { 
 background: url(img/dock-bg-right.png) no-repeat bottom; 
 float: left; 
 width: 17px; 
 height: 130px; 
} 

nav#docknav ul { 
 list-style-type: none; 
 padding: 0; 
} 

nav#docknav ul li { 
 position: relative; 
 float: left; 
 height: 130px; 
 width: 50px; 
 -webkit-transition: width 100ms linear; 
} 

nav#docknav img { 
 position: absolute; 
 bottom: 15px; 
 border: 0; 
 width: 100%; 
 -webkit-box-reflect: below -3px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(rgba(0,0,0,0.4))); 
} 

nav#docknav a span { 
 display: none; 
 background: rgba(0,0,0,0.6); 
 color: white; 
 padding: 2px 5px; 
 -moz-border-radius: 9px; 
 -webkit-border-radius: 9px; 
 border-radius: 9px; 
 position: absolute; 
 text-align: center; 
 top: 12px; 
 left: -6px; 
 width: 90px; 
 font: 12px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif; 
 text-shadow: 1px 1px 1px black; 
} 

nav#docknav a span:after { 
 content: "\00a0"; 
 display: block; 
 position: absolute; 
 bottom: -12px; 
 left: 45px; 
 width: 0; 
 height: 0; 
 border: 6px solid transparent; 
 border-top-color: rgba(0,0,0,0.6); 
} 

nav#docknav li:hover { 
 width: 90px; 
} 

nav#docknav li:hover span { 
 display: inline-block; 
} 

nav#docknav a { 
 text-decoration: none; 
}