miércoles, 11 de junio de 2014

Los generadores en línea de transiciones - CSS



1. CSS3 Generator

Si selecciona Transitions en el menú desplegable, CSS3 Generator (http://css3generator.com/) le permitirá trabajar con cinco propiedades (Property). Podrá especificar la duración (Duration) y el movimiento (Function).



2. CSS 3.0 Maker

Con CSS 3.0 Maker (http://www.css3maker.com/css3-transition.html) solamente podremos trabajar con algunas propiedades de las transiciones. Es posible definir el evento (Select Action), la duración (Transition Duration) y el movimiento (Transition Timing).



3. Crear las curvas de Bézier

Como ya vimos, la propiedad transition-timing-function nos permite aplicar nuestras propias curvas de Bézier con la palabra clave cubic-bezier. Este es un sitio web absolutamente genial que le ayudará a crear visualmente sus propias curvas de Bézier: http://cubic-bezier.com/
En la parte izquierda tiene un gráfico de Bézier en el que podrá cambiar los valores desplazando los círculos. La "fórmula" cubic-bezier se mostrará dinámicamente en la parte superior de la pantalla. También encontrará un comparador de movimiento y las curvas predefinidas.




Espero haber ayudado en algo. Hasta la próxima oportunidad!







No hay comentarios:

Publicar un comentario en la entrada