Puedes recibir las actualizaciones gratis por email

Emular un dock de MacOS con CSS Animations

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><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

Sigue la onda...

Puedes recibir gratis más artículos por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!

Autor de CSSBlog ES

Por ahora hay 3 comentarios ¿Quieres opinar?

05.26.09

No esta mal, pero en el ejemplo que has puesto va un poco a trozos y debería ir mas fluido, sinó el usuario se puede cansar

05.26.09

@Hades87 eso también depende de la versión del navegador que se utilice, la memoria y los recursos disponibles en el ordenador. A mí con la última beta de Safari me funciona bastante fluido. De todas formas pondremos otra forma de simular un dock con CSS dentro de poco.

Un saludo.

05.26.09

Wauuuu amigo, siempre me a fascinado la programacion en texto plano, y principalmente los códigos de HTML y css… grax por el informe eta muy padre:)

Escribir un comentario

Tu comentario:
* El nombre, email y el comentario son requeridos
Comentaristas del mes
Últimos comentarios
  • Boda: Gracias Pedro, lo probaré a ver si me funciona bien porque le iría perfecto a mi blog que...
  • drakkar: hola necesito centrar el menu dentro del div que lo contiene pero mira lo que pasa cuando hago esto: <...
  • Erik: Gracias muchas.. muy bueno!
  • Pedro CM: Ya veo que lo retwitteaste por Twitter, me alegro ;-) . My recent post Pack de 100000 tipografías...
  • JuniHH: Te agradezco muchismo el enlace de los bordes redondeados sin necesidad de JS's raros. Cuando...
Patrocinadores