Drawing a Christmas Robot with pure CSS
December 25, 2020 • 1 min read
Looking back it’s funny how I used to look at CSS art on codepen and think that I would never be able to do something similar. Around this time codepen sents a newsletter including a holdiday #CodePenChallenge. Those were impressive but not something I would touch until now.
After going through some CSS basics tutorials I wanted to better understand how position: absolute and position: relative work. What better way to do this than by making a project 😊
Digging a bit deeper I realized that by getting a better understanding of CSS I might be able to build a CSS pure image myself. I’ve seen Ania Kubów robot in one of her Scrimba courses and after checking the code I slowly made sense of it. The next step was to do a little tutorial on Pure CSS Images and I found great one here. Michael Mangialardi explains things very well and made this less intimidating. I have to add that I used Photoshop a bit in the past and have some understanding of layers work.This probably helped.
I won’t consider my simple Christmas Robot art but I am pretty proud to have done it.
Christmas Robot created with Pure CSS
The design was inspired by the Robot House coffeeshop in Barcelona. This was my coffee go-to place in November. Here I found a wonderful woman at the counter, probably the owner, who was always available for a bit of conversation and who helped me get through the day. I’m not sure if she needed me as a client or if I needed here more to get away from my home desk and “challenging” job.
If curious you can find the code on CodePen as well as on my GitHub.
Hope this will be the beginning of more such projects.
For those who are looking at images created with CSS like I used to I say that it might look hard and intimidating but if you start small you can draw some nice things too.
🤶🤖 Feliz Navidad!
Read More:
Stefi Rosca
👩💻 Frontend Developer, 🌍 traveler and⛷️ Skier
Recurse Center Alumn