Agrega dinamismo e interactividad a tus sitios bajo estándares web
¿Ya usas CSS para darle la presentación a tus sitios web? Ahora aprende con este curso video2brain a transformar elementos y realizar transiciones y animaciones que se ejecutarán de forma fluida y que serán compatibles con la gran mayoría de navegadores de computadores de escritorio y de dispositivos móviles.
En este curso conocerás las técnicas para agregar dinamismo a tu sitio web con CSS mediante los módulos de transformaciones, transiciones y animaciones.
Cada capítulo se centra en un módulo específico de CSS3 donde se explica su sintaxis y se muestra su uso, adicionalmente hay un capítulo con ejemplos en un sitio web real. En la gran mayoría de ejemplos se muestra la sintaxis completa, la cual incluye los diferentes prefijos propietarios que permiten dar soporte a los diferentes navegadores.
Entre las animaciones, transiciones y transformaciones que veremos, encontramos propiedades como escala, posición, opacidad, rotación y color; controlando tiempos, aceleraciones y otros elementos que otorgan gran dinamismo a tus sitios web multipantalla.
Un par de vídeos de muestra del curso:
1.- Animación, transformaciones y transiciones en CSS3: Transformaciones interactivas
Realizamos transformaciones que se ejecutan solamente cuando el usuario interactúa con el elemento.
2.- Animación, transformaciones y transiciones en CSS3: Uso de curvas cubic-bezier
En este video usamos valores de curvas cubic-bezier para agregar efectos personalizados de aceleración y desceleración.
Temario completo
Transformaciones CSS
- Estado actual de los módulos CSS para animación 05:12
- ¿Por qué animar con CSS? 01:22
- Transformaciones CSS 01:49
- Transformación rotate() 05:47
- Transformación translate() 05:13
- Transformación scale() 03:16
- Transformación skew() 03:09
- Modificar el punto de transformación 03:43
- Múltiples transformaciones 03:47
- Transformaciones interactivas 02:51
Transiciones CSS
- Creación de transiciones CSS 05:30
- Configuración de la transición del rollout 02:51
- Efectos de easing 05:30
- Uso de curvas cubic-bezier 02:51
- Uso de transition-delay 02:12
- Uso de los prefijos propietarios 03:37
- Notación acortada 05:33
- Transiciones en etapas 01:41
Ejemplos prácticos de Tranformaciones y Transiciones
- Color y escala 06:22
- Opacidad, escala, z-index y box-shadow 08:43
- Posición 06:16
Animaciones CSS
- Animaciones CSS 05:46
- Efectos de easing 01:47
- Uso de animation-delay 01:19
- Uso de animation-iteration-count y animation-direction 05:19
- Notación acortada 03:53
- Aplicar múltiples animaciones 04:33
- Animación por porcentajes 04:32
- Uso de animation-play-state 04:45
Despedida del curso
- Despedida del curso Animación, transformaciones y transiciones en CSS3 00:52
Deja una respuesta