dock-css-animations

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

Ver un ejemplo de su funcionamiento

Vía | Anieto2k