Efecto transition con html5 y css3

Vamos a empezar viendo uno de los nuevos efectos que html5 nos permite realizar.

Empecemos con el efecto transition. Gracias a él vamos a poder mover un elemento una cantidad de pixels dada en el eje X o el eje Y (en horizontal o vertical). Para ello, emplearemos unos nuevos atributos para las capas o imágenes en css.

Explicar antes de entrar más en materia, que tanto este como otros efectos que veremos, necesitan de cierta “adaptación” a los navegadores. Quiero decir, que aunque el código para crear el efecto sea : transition: margin 0.5s ease-out; es necesario agregar unas líneas de código para el resto de navegadores que no comprendan la orden. Estas líneas son (siempre las mismas):

  • -webkit-transition… : para navegadores Chrome
  • -moz-transition… : para navegadores Firefox
  • -o-transition… : para navegadores Opera

Ok, pues una vez comprendido esto, pasemos directamente al código fuente. Debemos crear unos atributos en css para una capa en cuestión, a la que llamaremos por ejemplo baja_imagen. Dichos atributos serán todos los que contiene css para capas, cada cual a su gusto. Por ejemplo:

div.baja_imagen {
    width:300px;
    height:100px;
    border: 1px solid black;
    float:left;
    -webkit-transition: margin 0.5s ease-out;
    -moz-transition: margin 0.5s ease-out;
    -o-transition: margin 0.5s ease-out;
    transition: margin 0.5s ease-out;
}

Ahora vamos a estudiar qué es lo que hace este código fuente:
Como sabemos, le estamos dando a la capa unas medidas de 300×100 pixeles, poniéndole un borde de 1 pixel de grosor negro y flotándola a la izquierda. Lo que le especificamos con el transition es únicamente el tiempo en segundos que tiene que tardar en realizarse la orden del hover, en este caso 0.5 segundos.

Por lo que si lo que queremos es que la capa descienda al pasar el cursor sobre ella, no tendremos más que completar el css con:

div.baja_imagen:hover {
margin-top:15px;
}

Y listo, cuando el cursor pase por encima de la capa, ésta descenderá 15 pixeles en 0.5 segundos. Hemos puesto margin-top para que descienda, pero podríamos ponerle margin-left para que la capa se desplazase hacia la derecha… o lo que quisiésemos.

Si quieres ver ejemplos de transiciones y más efectos:
Efectos hover con html5 y css3

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: