Increíble como puedes explicar sin que parezca como un profesor señor mayor de universidad que te pega toda la chapa y al final no entiendes nada xD pero a su vez si que lo explicas todo detalladamente y lo importante de las cosas a tener en cuenta. No se lo explicas todo de una manera muy dinámica y de los pocos que puedo tirarme 3h de videos enteras sin saltarme nada y se me pasan rápido. Debemos valorar mas estos videos, unas joyas para los que estamos aprendiendo programación, gracias por tu dedicación! 💯👌
Justo estaba buscando explicación de estos temas y éste vídeo es una joya. No sé qué haríamos los autodidactas sin contenido como éste, ya que no solo explicas súper bien sino que también es muy entretenido todo y el tiempo ni se siente. Muchas por todo. 💛🇨🇴
Pedazo de playlist CSS. Gracias por tomarte el tiempo de hacer este contenido esta muy bueno. Una de las cosas que más me gusta son las páginas que recomiendas son lo máximo
Con el tema del rendimiento, en la mayoría de los casos no van a notar ningún problema en las animaciones desde una computadora, como recomendación, si realmente quieren saber si la animación tiene buen rendimiento, véanla desde el móvil, ya que estos dispositivos típicamente tienen recursos más limitados. Los navegadores siempre intentarán utilizar la GPU para mejorar el rendimiento (por defecto las animaciones CSS se almacenan en la GPU), pero esto depende de las propiedades que se estén animando; la GPU de alguna manera tiene que enterarse de que es lo que debe hacer con los elementos para animarlos, y esto lo sabe gracias a la comunicación que el navegador realiza entre la CPU y la GPU; en general, la GPU es muy buena para manipular propiedades que tengan que ver con la composición de los elementos como las transformaciones, o la opacidad (opaco/transparente), y esto ocurre porque cuando la animación es cargada, la CPU procesa los elementos del DOM que serán animados generando texturas que son enviadas a la GPU, luego posteriormente la GPU ya tiene las texturas y los comandos para ejecutar la animación y solamente la procesa, existiendo una comunicación mínima entre la CPU y la GPU. Por el contrario, si modificamos propiedades del layout (width, height, margin, etc) o del pintado (background-color, color, etc) esto significa que el objeto ha cambiado, por lo tanto, la textura debe ser recreada, lo que fuerza una comunicación constante entre la CPU y la GPU, dañando el rendimiento no solo de la animación sino que de la página también y los elementos que rodean los objetos que están cambiando (Style Recalculation, reflows y repaints) afectando así en su mayoría a todo el DOM. Para el siguiente HTML:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam dolore dolor modi similique obcaecati soluta necessitatibus odio facere ducimus. Eligendi natus voluptas pariatur, animi dolorum eum obcaecati molestias? Laborum, et? Las siguientes dos animaciones técnicamente harían lo mismo: Con transformaciones: div{ margin: 100px; width: 100px; height: 100px; background-color: red; animation: animate 1s infinite; transform-origin: top left; } @keyframes animate{ to{ transform: scale(2); } } Con propiedades del layout: div{ margin: 100px; width: 100px; height: 100px; background-color: red; animation: animate 1s infinite; } @keyframes animate{ to{ width: 200px; height: 200px; } } Sin embargo, en la segunda animación (con layout) veremos que el párrafo se mueve cada vez que se ejecuta la animación (Style Recalculation, reflow y repaint), los cálculos para actualizar la animación en cada frame son efectuados por la CPU y nada más están listos los objetos son enviados a la GPU para que esta pueda animar ese frame en específico. Aunque podemos posicionar el elemento con absolute o fixed, incluso promoverlo a una nueva capa (will-change, translateZ(0)) puede que se optimice la comunicación CPU-GPU así como evitar afectar los elementos que los rodean (los elementos salen del flujo del navegador, stacking context, etc) pero los cálculos de las propiedades del elemento siempre se realizaran en la CPU.
Muchas gracias por este curso he estado una semana y algo con los 4 videos de css y el de html, me ha servido muchisimo, mil gracias por todo, he aprendido mucho, aunque tengo que integrar los conocimiento obviamente ya que son muchisimos
Muchas gracias Midu me vi todos los cursos de css y html y js no se que seguir espero saber que continuar mientras seguire practicando mucho! Gracias ♥
Es estupendo el concepto que utilizas siempre de explicar en detalle , para luego mostrar el shortcut. Coincido totalmente, es el modo de comprender lo que se está haciendo.
Eres el mejor. ❤ Le has dado más vida y visibilidad a mí camino como programador. Por cierto, pensamos de una forma similar con respecto a querer saber el "por qué" de las cosas.
Increíble todo el poder que nos has brindado Midu, eres grande. Muchas gracias, de verdad. Lo único que no me gusta es que algunas cosas sean experimentales y hasta la fecha no funcionen en todos los navegadores, pero bueno... Estarán trabajando para que esto sea posible más adelante.
con esto de las animaciones, se podría hacer un dark mode de tu pagina web usando solo css? por ahora voy por el minuto 56 no se si responde a esto mas adelante pero tengo esa duda
Ey midu disculpa una pregunta, como puedo hacer para que la transición de la galería solo se aplique 1 vez, es decir al hacer scroll hacia abajo y que ya luego al subir se vea como sería normalmente?
Hola midu! en el ultimo ejemplo de la animación de la galería, se podría animar solo una vez y que al volver a scrollear hacia arriba las imágenes queden con la opacidad de 1?
Creo que todo elemento se puede animar, pero hay propiedades que no se pueden animar, en la doc dicen qué sí y qué no. Lo otro el function por defecto es ease no linear.
Intenté hacer la galería con Astro, pero la animación no funciona. En cambio, si solo utilizo HTML y CSS de forma normal, todo marcha bien. No estoy seguro si es necesario configurar algunas cosas en Astro.
Me inspiró para continuar con mi sitio web grande midu. Una pregunta para el selector :has() no está soportado en firefox hay alguna forma de que lo soporte?? Algun código js??
Cosulta. ¿¿Se puede llevar este codigo a wordpress?? Cuando ingreso a CSS no me toma los cambios. Algún consejo? No entiendo por qué en mi visual se ve perfecto y en wordpress no funciona.
Hola buen día Midu, quisiera preguntarte si pudieras aconsejarme, yo se que ya no tra ajas en Udemy, lo que pasa que me compre un curso de JavaScript es el primer curso que compro online pero nunca me llego el link de descarga, únicamente me llego un Gmail con un número de pago GPA pero no me redireccionaron al curso en si. Será que pudieras ilustrarme porfavor. Gracias de antemano.
Hola Gracias por subir el video, te acabo de descubrir!. Hace poco he acabado un master de diseño web (vengo de offline) pero me estoy viendo tus videos de html y css. Justo en el proyecto de master me hice el portfolio con unas barras (si, barras, perdón) que solo conseguí que se llenasen al cargar. con lo que explicas en las imágenes consigo que se llenen al hacer el scroll, pero... ¿alguien sabe como hacer que se comience la animación cuando se empiezan a ver? 🥴
Gracias Midu , como no amarte si me solucionas la vida ajajajaj , se agradece , justo tenia muchas dudas con el tema de animaciones , si bien hacerlo con librerías soluciona ciertas cosas , siempre hay momentos donde se necesita implementar de 0, asi que agradecido totalmente ❤❤☕☕
Saludos midu..! Muchas gracias midu por el aporte a la comunidad de verdad muchas gracias..!!! Como puedo enviarte un regalo midu..! Saludos desde Ecuador..!
Mucha gente cobra por esto y no tienen tanta dedicación, eres grande midu...
Gracias por tu aporte a la comunidad
Estos videos deberían venir con certificados.
Se aprende mucho mejor y más rápido que en muchos cursos certificados.
Increíble como puedes explicar sin que parezca como un profesor señor mayor de universidad que te pega toda la chapa y al final no entiendes nada xD pero a su vez si que lo explicas todo detalladamente y lo importante de las cosas a tener en cuenta. No se lo explicas todo de una manera muy dinámica y de los pocos que puedo tirarme 3h de videos enteras sin saltarme nada y se me pasan rápido. Debemos valorar mas estos videos, unas joyas para los que estamos aprendiendo programación, gracias por tu dedicación! 💯👌
Gracias por todos tus videos y tu manera de compartir lo que sabes a personas como yo, que estamos empezando. gracias
Justo estaba buscando explicación de estos temas y éste vídeo es una joya. No sé qué haríamos los autodidactas sin contenido como éste, ya que no solo explicas súper bien sino que también es muy entretenido todo y el tiempo ni se siente. Muchas por todo. 💛🇨🇴
Grande midu, es real que no vi otro curso de este estilo en internet. Muchas gracias por tu magnifico aporte ❤
Saludos desde Argentina
Gracias a ti!
Pedazo de playlist CSS. Gracias por tomarte el tiempo de hacer este contenido esta muy bueno. Una de las cosas que más me gusta son las páginas que recomiendas son lo máximo
Midudev, enserió te lo digo que tus videos son los únicos que me los como de principio a fin.
Gracias, hoy aprendí bastante ❤🎉
😊😊😊
Practicamente nunca toco CSS, pero con este video, casi que me dan ganas de hacerlo 😁 excelente video! 👏
Con el tema del rendimiento, en la mayoría de los casos no van a notar ningún problema en las animaciones desde una computadora, como recomendación, si realmente quieren saber si la animación tiene buen rendimiento, véanla desde el móvil, ya que estos dispositivos típicamente tienen recursos más limitados.
Los navegadores siempre intentarán utilizar la GPU para mejorar el rendimiento (por defecto las animaciones CSS se almacenan en la GPU), pero esto depende de las propiedades que se estén animando; la GPU de alguna manera tiene que enterarse de que es lo que debe hacer con los elementos para animarlos, y esto lo sabe gracias a la comunicación que el navegador realiza entre la CPU y la GPU; en general, la GPU es muy buena para manipular propiedades que tengan que ver con la composición de los elementos como las transformaciones, o la opacidad (opaco/transparente), y esto ocurre porque cuando la animación es cargada, la CPU procesa los elementos del DOM que serán animados generando texturas que son enviadas a la GPU, luego posteriormente la GPU ya tiene las texturas y los comandos para ejecutar la animación y solamente la procesa, existiendo una comunicación mínima entre la CPU y la GPU. Por el contrario, si modificamos propiedades del layout (width, height, margin, etc) o del pintado (background-color, color, etc) esto significa que el objeto ha cambiado, por lo tanto, la textura debe ser recreada, lo que fuerza una comunicación constante entre la CPU y la GPU, dañando el rendimiento no solo de la animación sino que de la página también y los elementos que rodean los objetos que están cambiando (Style Recalculation, reflows y repaints) afectando así en su mayoría a todo el DOM.
Para el siguiente HTML:
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsam dolore dolor modi similique obcaecati soluta necessitatibus odio facere ducimus. Eligendi natus voluptas pariatur, animi dolorum eum obcaecati molestias? Laborum, et?
Las siguientes dos animaciones técnicamente harían lo mismo:
Con transformaciones:
div{
margin: 100px;
width: 100px;
height: 100px;
background-color: red;
animation: animate 1s infinite;
transform-origin: top left;
}
@keyframes animate{
to{
transform: scale(2);
}
}
Con propiedades del layout:
div{
margin: 100px;
width: 100px;
height: 100px;
background-color: red;
animation: animate 1s infinite;
}
@keyframes animate{
to{
width: 200px;
height: 200px;
}
}
Sin embargo, en la segunda animación (con layout) veremos que el párrafo se mueve cada vez que se ejecuta la animación (Style Recalculation, reflow y repaint), los cálculos para actualizar la animación en cada frame son efectuados por la CPU y nada más están listos los objetos son enviados a la GPU para que esta pueda animar ese frame en específico. Aunque podemos posicionar el elemento con absolute o fixed, incluso promoverlo a una nueva capa (will-change, translateZ(0)) puede que se optimice la comunicación CPU-GPU así como evitar afectar los elementos que los rodean (los elementos salen del flujo del navegador, stacking context, etc) pero los cálculos de las propiedades del elemento siempre se realizaran en la CPU.
jajaja me encanta con la energia😃 que transmites la info, muchas gracias por compartirlo!
Era el video que estaba esperando, dejo mi like, me voy a trabajar y lo veo en volviendo. Gracias Midu!!!
Gracias a ti!!
Quería estudiar acerca de esto justamente, y pum midu lo explica. Simplemente un crack tqm midu
Gracias, Cesar!🤗
Wow literal bien explicado con ejemplo y gratis. mil y muchas gracias ser una gran persona 🎉
me vi los 4 videos en un dia y fue la mejor inversion de tiempo de mi vida, aclare muchas cosas y aprendi nuevas muchas gracias midu
Excelente!
yo aprendi bastante pero me olvide todo XD
@@facundoz8790 por eso hay que practicar y tomar nota... es un lenguaje, es como aprender un nuevo idioma, si no practicas seguido, te vas a olvidar
Yo empecé a aprender hace una semana y esto es fantástico para mi portafolio.
Muchas gracias por este curso he estado una semana y algo con los 4 videos de css y el de html, me ha servido muchisimo, mil gracias por todo, he aprendido mucho, aunque tengo que integrar los conocimiento obviamente ya que son muchisimos
Muchas gracias Midu me vi todos los cursos de css y html y js no se que seguir espero saber que continuar mientras seguire practicando mucho!
Gracias ♥
Luche mucho para terminar de ver el video pensando que ya sabia todo de animaciones y al final aprendí mucho mas de lo esperado . Gracias Midu
Excelente contenido, Midu, felicidades por tu contenido, siempre mejoro con tus vídeos.
Gracias, Charly! 🤗
Excelente contenido el que encuentro en este canal. Siempre hay algo nuevo que aprender, explicado de una manera genial.
Pero que buen video acabo de ver! Necesitaba hacer una animacion y me estaba quebrando la cabeza! Gran contenido y super bien explicado
Midu, bro! tus tutoriales no tienen desperdicio. Muchas gracias!
Gracias, saludos!
Gracias amigo. Quisiera tener el conocimiento que tienes. Me ayudó. Ahora aplicaré este nconocimiento en mi página web.
Uno piensa que lo sabe todo hasta que ve tus videos, gracias por tanto contenido informativo, educativo valioso y gratis!!
Definitivamente es el mejor de los mejores canales de yt en programación
Muchas gracias!!!!
muy muy bueno gracias Midu, la verdad que no lo conocía
Es estupendo el concepto que utilizas siempre de explicar en detalle , para luego mostrar el shortcut. Coincido totalmente, es el modo de comprender lo que se está haciendo.
Muy bueno el curso me encanto y mas en UA-cam para verlo en cualquier momento
Midu, sos lo mas grande que hay! muchas gracias!
Q ricoo causaaaa!!!, justo hice recien ese efecto del final con js y me decia a mi mismo seria genial poder hacerlo con CSS nomás
Definitivamente el programador del momento xd
Sos muy crack! saludos desde Argentina!
Eres el mejor. ❤
Le has dado más vida y visibilidad a mí camino como programador.
Por cierto, pensamos de una forma similar con respecto a querer saber el "por qué" de las cosas.
Excelente curso midu!!! muchas gracias por tus videos!!👏👏👏
Joder midu que pasada de Curso es de lo mejor con el estilacho a millón
esta re good !!! para mi portafolio XD
Excelente Midu, gracias por el curso. 👏
Increíble todo el poder que nos has brindado Midu, eres grande. Muchas gracias, de verdad. Lo único que no me gusta es que algunas cosas sean experimentales y hasta la fecha no funcionen en todos los navegadores, pero bueno... Estarán trabajando para que esto sea posible más adelante.
Midu solo puedo decir que te amo bro
Lo esperaba:DD
Primera vez que veo uno de tus videos y me encanto!!!
aprendiendo de un grande entre gigantes, un titan
Midu Midu ✊ ra ra ra 🎉🎉🎉 bendiciones 🙌 hermano que Dios te bendiga siempre muchas gracias
Esta información no vale oro, vale diamantes, muchas gracias
Gracias por comentar
Eres el mejor midu
🥲 gracias
miduu eres el mejor!, de grande quiero ser como tú , un saludo desde Perú
Excelente como siempre midu!
¡Que chulada, muchas gracias!
Que chimba que CSS ya tenga eso
Que grande midu ahora hacer con su puglin de tailwind ❤❤
Gracias midu que grande
¡¡ Gracias Midu por otro excelente contenido !!
Gracias a ti!
Gracias Midu ❤
eres un genio, muchas gracias
Dios le page, sería posible que nos de otras 2 horas de CSS. Por Favor.
Excelente tuto, y le sigo mi amigo.
Muchisimas gracias por este conocimiento
Era una noche aburrida, ahora no 🤩
Y puntooo
Grande midu muchas gracias por el contenido.
Gracias a ti!
Hola Midu. ¿Ha dejado de tener soporte animation-timeline? En Can i use no aparece ahora mismo a no ser que esté yo equivocado. Un saludo
con esto de las animaciones, se podría hacer un dark mode de tu pagina web usando solo css? por ahora voy por el minuto 56 no se si responde a esto mas adelante pero tengo esa duda
Ey midu disculpa una pregunta, como puedo hacer para que la transición de la galería solo se aplique 1 vez, es decir al hacer scroll hacia abajo y que ya luego al subir se vea como sería normalmente?
Siempre Grande Midu
Muchas gracias amigo ✌️
Hola midu! en el ultimo ejemplo de la animación de la galería, se podría animar solo una vez y que al volver a scrollear hacia arriba las imágenes queden con la opacidad de 1?
Que crack midu 🎉🎉
Creo que todo elemento se puede animar, pero hay propiedades que no se pueden animar, en la doc dicen qué sí y qué no. Lo otro el function por defecto es ease no linear.
Midu, cómo se llama el programa que usas para acercar algo que de lejos no se alcanza a ver, me parece muy interesante, está disponible para Windows?
Sos un crack!
Te pasaste midu, sos el amo
te amo, gracias por el curso (づ￣ 3￣)づ
Intenté hacer la galería con Astro, pero la animación no funciona. En cambio, si solo utilizo HTML y CSS de forma normal, todo marcha bien. No estoy seguro si es necesario configurar algunas cosas en Astro.
Platzi: Midu no hagas eso
XDDDDD a chuparla Platzi, todo está en yutub 🧐
En Crack el Midu...
Jajaja deberían prohibirlo jajaja muy buen curso, estos son los mejores para los avanzados, cuando nos actualizas de cosas nuevas!
9:57 puedes hacer una transición de 2s para el hover…. Pero al “regresar” que sea mas rápida ?
32:07 resuelto.!
Jajaja eso te iba a decir! Que justo lo comentamos en el curso :)
@@miduliveya sabes lo que pienso de ti: LuPutoAmo
1:16:13 Si no les funciona "animation-timeline: scroll(root block);" para detectar el scroll vertical me sirvio usar solo "scroll(y)"...
Papi midu ❤❤❤❤❤❤
Me inspiró para continuar con mi sitio web grande midu. Una pregunta para el selector :has() no está soportado en firefox hay alguna forma de que lo soporte?? Algun código js??
Utilizar postcss para transformar css
@@codeXavi sería con gulp para instalar las dependencia nv.. Y ya lo as probado te funcionó con has() xq leí algunos block y dicen q nada
Justo ahora van a añadir soporte en la siguiente versión. Por ahora hay que usar PostCSS.
Despues de este video me van a aumentar el sueldo con toda esta magia! GRACIAS MIDU por ayudarme a comer caliente!!!
Luuu puuuto aaaaamo
me estaba dando error el IntersectionObserver y luego me di cuenta de que midu había subido esto hacía 8 horas :'v
Cosulta. ¿¿Se puede llevar este codigo a wordpress?? Cuando ingreso a CSS no me toma los cambios. Algún consejo? No entiendo por qué en mi visual se ve perfecto y en wordpress no funciona.
tengo un problema, no se ve esta animación en dispositivos móviles
por cierto, excelente trabajo, muy bien explicado
Hola buen día Midu, quisiera preguntarte si pudieras aconsejarme, yo se que ya no tra ajas en Udemy, lo que pasa que me compre un curso de JavaScript es el primer curso que compro online pero nunca me llego el link de descarga, únicamente me llego un Gmail con un número de pago GPA pero no me redireccionaron al curso en si. Será que pudieras ilustrarme porfavor. Gracias de antemano.
me estás diciendo que perdí tiempo aprendiendo a usar GSAP, pudiendo hacer todo esto con CSS3?
Se puede hacer en Astro ?
Hola Gracias por subir el video, te acabo de descubrir!. Hace poco he acabado un master de diseño web (vengo de offline) pero me estoy viendo tus videos de html y css.
Justo en el proyecto de master me hice el portfolio con unas barras (si, barras, perdón) que solo conseguí que se llenasen al cargar.
con lo que explicas en las imágenes consigo que se llenen al hacer el scroll, pero... ¿alguien sabe como hacer que se comience la animación cuando se empiezan a ver? 🥴
Hola Midu!, "¿Cuál es el teclado que actualmente utilizas o cuáles recomendarías para programar?"
Te recomiendo que uses el que más te guste jajaja yo uso el Magic Keyboard.
1000 puntos!
gracias
Excelente
Gracias Midu , como no amarte si me solucionas la vida ajajajaj , se agradece , justo tenia muchas dudas con el tema de animaciones , si bien hacerlo con librerías soluciona ciertas cosas , siempre hay momentos donde se necesita implementar de 0, asi que agradecido totalmente ❤❤☕☕
Saludos midu..! Muchas gracias midu por el aporte a la comunidad de verdad muchas gracias..!!! Como puedo enviarte un regalo midu..! Saludos desde Ecuador..!
👏👏👏👏👏
Van a haber más cursos de CSS?
Que mal que aun no este soportado por ningun navegador
A esperar para poder usar esta belleza!!!
Yo lo acabo de probar en edge y chrome y funciona genial
Claro que está soportado por navegadores. De hecho un 60%. Lo explico en el vídeo, Mark.
😂1:33 otra explicación venezolana a lo natural hay coo😂
en otros tutoriales podrias dejar el codigo que escribes?, seria mas interactivo el ver tu codigo pero en nuestro pc, like, me vi todo el video