Este curso es lo máximo. Lo único malo es que si no viste la peli te comes spoilers 😄
Requisitos para tomar el curso
Sabes más de animaciones de lo que crees
Animationland game
Creando contadores con CSS en Animationland
Maquetando a nuestros conejitos en Animationland: contexto de apilamiento
Dibujando a nuestros conejitos con CSS en Animationland
Animation y keyframes en CSS
Animation name y keyframe
Animation duration
Animation timing function, iteration count y delay
Animation direction, fill mode y play state
Rendimiento de animaciones con CSS
CSS Triggers: layout, paint y composite
Debugging de animaciones con DevTools
Buenas prácticas para optimizar animaciones web
Libros recomendados y próximos pasos
Continúa en el Curso Práctico de Animaciones con CSS
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Crear cuenta
Si ya tienes una cuenta,
Iniciar sesión
CSS Triggers: layout, paint y composite
9/12Recursos
Aportes 8
Preguntas 3
Ordenar por:
-
Composite: Ordena las partes de la página. Propiedades como opacity y transform.
-
Paint: Rellena píxeles. Implica colores, imágenes, textos, sombras…
-
Layout: Diseño de la página. Ancho, margin, padding, border…
Hay una extensión de VSCode donde te muestra su procesamiento que debe utilizar el navegador para que se ejecute en nuestra pantalla. La extensión se llama CSS Triggers
Aquí la pagina que la profe usa
👇
CSS Triggers
Recomiendo ver esta lectura, cuenta con GIF y ilustraciones que te permitirán entender mejor como funcionan los procesos.
link: https://developers.google.com/web/updates/2018/09/inside-browser-part3
Resumen de la clase
Existen algunas propiedades en css que hacen que las paginas tarden mas en cargar. Esto se debe a que tienen que pasar por ciertas “capas” de renderizado hasta que se pinten en la pantalla.
.
En pocas palabras, las propiedades que tengan relacion con una gran cantidad de pixeles nos van a afectar en el performance de la pagina web. Por eso el background afecta al desempeño de la pagina web.
.
Este tema también se ve en el curso pasado, aunque no se toca muy a fondo.
Notas de la clase
CSS Triggers
Estos son los procesos que influyen en el renderizado de la web, podemos centrarnos principalmente en:
- Layout → Este se encarga del diseño de nuestra pagina, sus dimensiones y organizacion.
- Paint → Se encarga de rellenar todos los pixeles, entra en juego el tema de colores, imagenes, sombras y mas.
- Composite → Este se encarga de ordenar todas las partes de nuestra pagina, podemos relacionarlo con propiedades como transform u opacity
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.