24

10

Transition: ejemplos (I)

Os voy a explicar como podemos usar la propiedad de CSS3 encargada de hacer fluidos los cambios en nuestra web, la propiedad transition, y esta vez me ha propuesto el artículo @emobcapp (haré poco a poco más ejemplos que os puedan servir de ayuda).
Si no sabéis aún que es transition o las transiciones podéis ver el manual de como usarlas.
Para empezar os mostraré este ejemplo, aunque en toda la web hay multitud de efectos hechos con transition (como el cartelito de Xitrus, el menú, el pie de página...):

Con transition el limite está en nuestra imaginación

Este es un ejemplo de los efectos que produce transition, que son suaves y ligeros, sin necesidad de usar grandes frameworks como jQuery y siendo compatible con la mayoría de las propiedades (actúa cuando hay un cambio de color, tamaño o posición).
Para crear el efecto de estar "girado" tridimensionalmente he usado border, que es más interesante de lo que parece, ya que como podéis ver da un efecto de profundidad y el código CSS de el primer cuadro es el siguiente:

1. .cuadro1{

width:0px;

height:200px;

border-color:transparent;

border:120px solid #46C9C5;

transition:all 1s ease;

2. }
4. /* Cambia al pasar el ratón por encima del contenedor */
5. .contenedor:hover .cuadro1{

height:160px;

border-color:transparent #46C9C5;

border-width:20px 0px 20px 100px;

6. }

Otros ejemplos más simples

Una de las formas que mejor queda el transition es cambiando ligeramente el color de la letra al pasar por encima, algo muy usado en menús modernos y links.

Este ejemplo (sin incluir la forma del botón, solo contando el color del texto) se basa en cambiar el color de las letras con :hover incluyendo la propiedad transition en el mismo elemento, y como podemos ver no tiene ninguna complicación, simplemente añadirla en la clase y los cambios se efectúan de forma progresiva.

1. /* Ejemplo de cambiar el color del texto */
2. .texto{

color:#FFF;

transition:all 1s ease;

3. }
5. .texto:hover{

color:#46C9C5;

6. }