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><img src="finder.png" alt="Imagen" /><span class="desc">Finder</span></li>
<li><img src="systempreferences.png" alt="Imagen" /><span class="desc">Preferences</span></li>
<li><img src="firefox.png" alt="Imagen" /><span class="desc">Firefox</span></li>
<li><img src="itunes.png" alt="Imagen" /><span class="desc">iTunes</span></li>
<li><img src="terminal.png" alt="Imagen" /><span class="desc">Terminal</span></li>
<li><img src="trash.png" alt="Imagen" /><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
