¡Te doy la bienvenida a un nuevo reto de CSS!
Esta vez vamos a acceder a todo tu potencial creativo para animar un personaje con HTML y CSS, y resolveremos el nuevo reto de la Liga de Creatividad de Platzi que te lleva a diseñar tu versión superpoderosa animada para cómic en 10 días.
Antes de empezar:
1️⃣ La clase de Platzi que te recomiendo para realizar este reto es: Clase extra: reto Liga Creativa y,
2️⃣ Los cursos de Platzi que te recomiendo para realizar este reto son los siguientes:
Para este reto te propongo que realices los siguientes 4 pasos:
💡 Recomendación: evita copiar y pegar el código.
Trata de transcribir cada detalle y entender muy bien su funcionamiento (Sin afán, tómate tu tiempo). Sólo de esta forma podrás convertirte en un(a) experto(a) en maquetación con CSS.
ʕ•́ᴥ•̀ʔっ ¡Empecemos!
Antes de comenzar, es importante tener claro cuál será tu personaje o escena a animar. Para ello puedes escudriñar entre tus series y películas favoritas (yo escogí Stranger Things de Netflix) o crear un personaje desde cero, así como nos enseña la profe Anna Graj
ales en el Curso de Construcción de Personajes en Cine y TV.
En mi caso busqué en Google “Escenas de la primera temporada de Stranger Things” y me arrojó como resultado esta página:
De allí recordé una de mis escenas favoritas: cuando la mamá de Will se comunica con él a través de luces navideñas. Así qué, traté de buscar una imagen que me pudiera dar inspiración para plasmar esta escena en HTML y CSS:
Hasta aquí, ya tenemos una idea de esa escena a plasmar. Lo que sigue, es convertir esta escena de la vida real en una escena que podamos realizar en código de forma simple y sencilla (inicialmente).
Antes de pasar al siguiente ítem, aprovecho para contarte que nosotros podemos crear con HTML y CSS cosas realistas como las de esta pintura en óleo de Diana Smith. Así que, no hay límites para la construcción de nuestros personajes o escenas !
Después de conocer nuestro personaje o escena, la idea es plasmar primero en HTML y CSS toda la maquetación para porsteriormente animar.
En mi caso quise plasmar la escena del alfabeto que escribió la mamá de Will en la pared de su sala en la temporada 1 de Stranger Things de forma simple:
🧑💻 Aquí te comparto el código: “Holly, Jolly” Chapter 3 · Stranger Things · CodePen with animation
Ya con esto, podemos irnos al siguiente paso para animar las luces de navidad 🎄
Las animaciones en CSS nos permiten animar la transición entre un estilo CSS y otro. Para esto, es importante conocer cómo es la estructura que se necesita para escribir nuestras animaciones con CSS.
Las animaciones constan de dos componentes: el primero de ellos es el estilo que describe la animación CSS (como la línea 64 de este código) y el segundo, lo vemos en el siguiente paso 😉.
En Platzi, hemos creado 3 CheatSheet sobre todas las propiedades y valores para transiciones, transformaciones y animaciones con CSS para que puedas tener una visión general de lo que existe y de lo que puedes usar. Estas, las puedes encontrar en:
💡 Clase relacionada: Propiedades para crear animaciones con CSS y propiedades animables
En donde te podrás encontrar cosas como las siguientes:
Como mencionamos anteriormente, las animaciones constan de dos componentes. Ya hablamos del primero, que es el estilo que describe la animación CSS. Y ahora es el turno para el segundo: el conjunto de fotogramas que indican el estado inicial y final, así como posibles puntos intermedios en la misma (como el código entre las líneas 67 y 77).
Teniendo en cuenta eso, la animación de nuestras luces navideñas queda de la siguiente forma:
🧑💻 “Holly, Jolly” Chapter 3 · Stranger Things · CodePen with animation
El último día del reto recibirás un link a un formulario en el que podrás subir tu producto final. Expertos de las facultades de Desarrollo y de Contenido Digital elegirán el producto más impactante para mostrarlo durante el Platzi Live.
¿Buscabas convertirte en el superhéroe que sabes que eres y ser parte de algo más grande que tú? La Liga de Creatividad Platzi te está esperando.
Tienes hasta el 28 de septiembre a medianoche (hora Colombia) para terminar tu reto. Consulta aquí el paso a tu hora local para que no pierdas la oportunidad de subirlo!
Aun estoy muy involucrado en el JS Challenge, pero en cuanto termine quiero especializarme más en CSS.
Súper me animare a poner a prueba la creatividad.
Al leer esto veo que existe la probabilidad de crear animación usando HTLM y CSS. Ya que al ver una pantalla en blanco lo ve como un lienzo en blanco del cual tu puedes diseñarlo como quieras y tu materiales para pintarlo son líneas de código.
¡A desatar la creatividad! :gre
Excelente , voy a hacer el mío 💪
Recuerdo cuando un profesor nos mostro que hizo un Minion de la película Mi villano favorito usando solo elementos de CSS y nos reto a hacer lo mismo creando nuestro propio personaje. Yo hice un Darth Vader
Muy buen post, excelente contenido y enlaces.