Contenido

Dock estilo MacOS con CSS Animations

2 abr

+ 15

Hace unos meses vimos unos scripts que nos permitían emular el dock de MacOSX en nuestras aplicaciones web. Con la llegada de CSS Animations, esta tarea es mucho más fácil. 

<html>
        <head>
        <title>MacOSX Dock CSS Animations</title>
        <style type="text/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%;}
        </style>
        </head>
        <body>
        <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>
        </body>
</html>

La clave del efecto es -webkit-transition, una propiedad que los usuarios de Safari 3.1, WebKit ya pueden disfrutar. He montado un pequeño ejemplo de como quedaría (ver con Safari o WebKit).

¿Como funciona?

Si nos fijamos en el código entenderemos el funcionamiento de esta propiedad.

.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: opacity 1s linear;}
.dock li:hover img, .dock li:hover span{width:128px;opacity:1;}
.dock li:hover span {left:50%;}

En la definición de estilos de nuestros CSS, además de definir el aspecto de los elementos le añadimos la declaración de la transición que se aplicará a dicho elemento. En la primera línea, aplicamos el tipo all, que durará 1 segundo usando el método ease-in.

Justo en la definición del estilo al pasar por encima del elemento, indicamos el nuevo tamaño/opacidad, en este momento es donde entra en juego la propiedad -webkit-transition, que aplica el efecto desde la propiedad anterior a la definida en el :hover.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.