Serie: 5 Mini-Proyectos para Mejorar mis CSS (Proyecto 1)
Hola, soy Aniuska trabajo como Web developer desde el 2016, aunque tengo cierto nivel de conocimiento de CSS (mi fuerte es el backend) quiero comenzar esta serie de 5 mini-proyectos como un reto personal para mejorar esta habilidad, y para eso qué mejor que hacer esto público (Sin presiones! XD). Sin más rodeos les presento el primer proyecto de esta serie:
Para este primer proyecto decidí inspirarme en una imagen de un póster que conseguí en Pinterest, yo la llamo mi imagen modelo:
https://www.pinterest.com/pin/30469734965112255/
De esta imagen quise buscar más información, pero realmente no conseguí mucho, solo está reseñada en un montón de artículos sobre posters.
Herramientas:
Aquí listo todas los programas/páginas que voy a usar:
EL PROCESO
- Primero: Tomé los colores de la imagen, para esto hice uso de una extensión para Google Chrome llamada Colorzilla, abriendo la imagen en el navegador elegí los colores y los guardé. En esto fue sencillo porque sólo tiene 3 colores: Rojo(#ec1e25), Blanco(#ffffff) y Negro(#000000).
- Segundo: para crear las manos decidí usar archivos SVG, yo hago uso de InkScape, que es la alternativa gratis a Illustrator. Lo que normalmente hago es tomar la imagen y abrirla en el editor (InkScape) y luego repaso el contorno.
- Tercero: arme mi código html, muy sencillo, que consta de un div usado como un contenedor, dentro mi SVG (para ver el código SVG puedes abrir el archivo en un editor de código como Sublime Text)
- Cuarto: agregué mis CSS
En este momento quise agregarle un toque más así que decidí animar las manos y esto es lo que más me gusta sobre los SVG que se pueden manipular mediante CSS.
Es importante acotar que al momento de crear el documento cada mano está ubicada en una capa diferente, ¿De qué manera esto incide? bueno cada capa se le puede asignar un id, el cual podemos tratar como un selector de css luego, en este caso a la mano negra, que es la que quiero animar, le asigne el id=manonegra, así claro y sin complicaciones, y procedí a crear las animaciones en css:
PD: si no sabes como crear animaciones, no te preocupes, puedes hacer uso de cualquier librería como animate.css.
- Quinto: adicional le puse un título y Listo!
Este fue el resultado y el código, lo subí en la plataforma codepen , tengo años en esta plataforma pero realmente no uso mucho, espero ahora poder llenar mi perfil y compartir mi evolución!.
Te dejo mi perfil de codepen , si quieres comparte el tuyo en los comentarios, con gusto me daré una pasada, también déjame tu opinión sobre el reto, que le cambiarias?, lo logré o no? …
Comenten sin miedo!
Hasta el próximo proyecto! ♥
