Jump to content

✅ Curso: (CSS Avanzado) Español [MG +]


Recommended Posts

Curso-CSS-Avanzado.jpg

 Curso: CSS Avanzado Español

Informacion.png

En este curso avanzado de CSS vas a aprende a crear animaciones para la web usando sólo CSS  que generen impacto (sin tener conocimientos de javascript) . Potencia  la interacción con el usuario y aumenta la usabilidad de tus proyectos.  Las animaciones convierten un proyecto aburrido en uno lleno de  vida y que los usuarios y clientes aman, aprende con el mejor profesor  de CSS en habla hispana.

 

 
Contenido del curso CSS Animaciones

 
Modulo 1

 
Introducción

 

Cambios de estado (triggers CSS)
Propiedades animables y no animables
Estado inicial de las propiedades
Tipos de animaciones: transiciones y animaciones

 

Transiciones

 

Transition-property
Transition-duration
Transition-delay
Transition-timing-function (ease, ease in, ease out, etc)
Shorthand transition

 
Modulo 2

 
Animaciones (I)

 

@eyframes
animation-name
animation-duration
animation-iteration-count
animation-direction
animation-timing-function
animation-delay
animation-fill-mode
animation-play-state
Shorthand Animation

 

Animaciones (II)

 

Animation event (javascript)
Controlar animaciones CSS con javascript
Curva de la animación (cubic beizer)
Animación de sprites (steps)

 
Modulo 3

 
Transformaciones

 

Transformaciones 2D
Rotate()
Translate()
Scale()
Skew()
Transformaciones 3D

 

Trucos y consideraciones

 

Debug de animaciones desde el browser
Trucos para mejorar el rendimiento
Propiedad will change
Animaciones con clip-path
Animaciones con filtros CSS
Animaciones con variables nativas (custom properties) de CSS

 
Modulo 4

 
Animaciones CSS y SVG

 

Estructura de un SVG
Exportar desde programas de ilustración (Illustrator, Gravit Designer, Inkscape, Affinity Designer)
Utilizar recursos web
Propiedades CSS para SVG
Animaciones SVG

 

Proyecto final (librería Open Source)

 

Crearemos una librería de animaciones CSS
Utilizaremos Sass para empaquetar las animaciones en mixins
Utilizaremos buenas prácticas de arquitectura CSS para evitar conflictos
Se publicará en npm para que la puedan utilizar en sus proyectos

datos%2Btecnivos.png

  • Idioma: Español
  • Peso: 2.72 GB

links.png
ver-enlaces-min.jpg

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...