Gracias a CSS Animations las posibilidades al programar con CSS se multiplican. Podemos hacer, por ejemplo cubos en 3D o un Pong. Esta vez enseñaremos a crear un dock parecido al de MacOS, utilizando únicamente CSS Animations. Compatible con Firefox 3.5+ (Aunque no funciona correctamente el efecto de transición) y Safari 3+ y 4+. No se ha comprobado en Internet Explorer.
Estructura
Código CSS
#page { margin-top:10em;} .dock li {display:inline;} .dock img {width:96px; opacity: 0.7; -webkit-transition: all 1s ease-in;} .dock span {position:absolute;top:3em;left:0;opacity:0;-webkit-transition:all 1s ease-out;} .dock li:hover img, .dock li:hover span{width:128px;opacity:1;} .dock li:hover span {left:50%;}
Si nos fijamos el truco está en la propiedad -webkit-transition. Aplicamos el tipo all que durará 1 segundo con el método ease-in. Al pasar por encima del elemento cambiará la opacidad, que -webkit-transition aplica en la propiedad anterior y en la definida en el :hover.
Código HTML
<div id="page"> <ul class="dock"> <li><span class="desc">Finder</span></li> <li><span class="desc">Preferences</span></li> <li><span class="desc">Firefox</span></li> <li><span class="desc">iTunes</span></li> <li><span class="desc">Terminal</span></li> <li><span class="desc">Papelera</span></li> </ul> </div>
El código HTML es muy simple, un div con id=”page” que engloba un grupo de listas con class “dock”, que serán las aplicaciones del Dock.
Estandarización
CSS 2.1 inválido.
XHTML 1.0 Transitional válido.
Ejemplo de su funcionamiento
Vía | Anieto2k