Ir al contenido principal

Transiciones con CSS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el post previo se comentó la manera de hacer Animaciones con CSS3, en esta ocasión hablaremos de otra forma de generar cambios visuales: Transiciones con CSS3. A diferencia de las animaciones, las transiciones no utilizan "keyframes", sino mas bien son indicaciones de cómo queremos visualizar los cambios (tiempo, propiedades, "easing"), dichos cambios se pueden activas utilizando pseudoselectores CSS como "hover". En el cuadro siguiente se aplicó un efecto donde la anchura y el color cambia al ubicar el mouse sobre el.

Pasa el mouse sobre mi

Realicemos entonces los pasos para implementar las transiciones.

1.- Coloquemos el elemento al que queremos aplicarle las transiciones y le damos un ID:

<body>
     <div id="miDiv">
     Este es mi DIV
     </div>
</body>


2.- Generamos un estilo inicial para el elemento:

<style>

#miDiv{
 width: 150px;
 height: 150px;
 background-color: #666;
}

</style>

3.- Al aplicar el estilo el elemento queda así:

Este es mi DIV

4.- Después generamos el estilo con los cambios, este estilo se activará con el pseudoselector "hover"

<style>
#miDiv:hover{
 width: 250px;
 height: 250px;
 background-color: #ABC;
}
</style>

5.- Ya con estos estilos nuestro elemento cambia de manera instantánea entre ambos estilos

Este es mi DIV

6.- Finalmente solo es necesario indicar al estilo inicial la transición que queremos aplicar (recordemos los prefijos para cada navegador), en este caso indicamos que la transición dure 2 segundos, quedando así  modificado

<style>

#miDiv{
 width: 150px;
 height: 150px;
 background-color: #666;

 -webkit-transition: 2s;  /*Safari y Chrome*/
 -moz-transition: 2s; /*Firefox*/
 -ms-transition: 2s;  /*Internet Explorer*/
 -o-transition: 2s;  /*Opera*/

}

</style>

7.- Finalmente nuestro elemento ha quedado con la transición implementada

LISTO

También podemos hacer ligeras variaciones especificando por ejemplo el tiempo que queremos para cada una de las propiedades que cambiarán:

-webkit-transition: width 3s, height 4s, background-color 3s;
-moz-transition: width 3s, height 4s, background-color 3s;
-ms-transition: width 3s, height 4s, background-color 3s;
-o-transition: width 3s, height 4s, background-color 3s;

O también definir un tiempo de retraso para activar la transición:

-webkit-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-o-transition-delay: 1s;

Inclusive podemos definir el tipo de easing, es decir la forma de hacer la animación, si deseamos que vaya uniforme o que lleve alguna aceleración al principio o al final, etc:

-webkit-transition-timing-function:ease-in;
-moz-transition-timing-function:ease-in;
-ms-transition-timing-function:ease-in;
-o-transition-timing-function:ease-in;

Los valores posibles para este parámetro son:

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • cubic-bezier(n,n,n,n)

Siendo ésta última cubic-bezier(n,n,n,n), una opción donde podemos insertar valores entre 0 y 1.

De esta forma complementamos el post anterior de Animaciones con CSS3, de manera que combinando un poco estas características podemos generar efectos que antes sólo se podían realizar con Flash.

Cabe mencionar que estas características también pueden mezclarse con otras herramientas como Javascript o algún framework (JQuery, JQuery Mobile).

Espero sea de utilidad y le saquen provecho.

Felices líneas de código.



Comentarios

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés).

Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de manera qu…

Usando Componentes de Flash: Paleta de Colores / Using the Flash Components: Color PIcker

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Al desarrollar en Flash Professional encontraremos un sinfin de ventajas, una de ellas son las prestaciones visuales, es decir la calidad visual de los elementos que se pueden integrar y también la interactividad y diversidad de ellos.

Cuando es necesario podemos crear nosotros mismos los elementos que necesitemos dependiendo de las características, comportamientos, vista, etc. Para nuestra fortuna existen ya varios elementos de antemano fabricados y diseñados para su correcto funcionamiento e implementación, dichos elementos se llaman "Componentes" y los podemos encontrar en el panel del mismo nombre.

Este es el primer post de una serie donde se platicará de manera práctica acerca de lo sdiferentes componentes que ya incluye Flash. En esta ocasión hablaremos del Color Picker o "Seleccionador de Co…

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …