CSS3 Dock
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 zum Downloaden:
CSS3-Dock.zip
<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;
}
CSS3 Dock
2 Kommentare:
Der Mac-Fetischist / Perfektionist in mir möchte aber, dass der Vergrößerungseffekt weich ist (wie in OS X), und nicht “zittrig” (erst wenn der Mauszeiger das nächste Icon erreicht). Jemand eine Idee, wie man das anstellen kann?
Kommentar 1. von Alex
Klar, perfekt ist das nicht. Ich sehe das mehr als Experiment, auszutesten was alles mit CSS3 möglich ist. Vorschläge, wie man das ganze noch verbessern könnte, sind hier gerne gesehen.
Nimmt man Javascript hinzu kommt man der Sache schon recht nahe:
Interface elements for jQuery
Kommentar 2. von Frank