CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

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