Today is a CSS day. Not only that, we’re adding some animations baby! So here’s the gist, I want to make a pure CSS image of a rocket blasting off. so let’s just get right to it.
As always, I started off with Sketch to illustrate the rocket and honestly it’s a good way to help me think of how I’ll structure the HTML. It was rough which made me realize how much of a n00b I am when it comes to vector graphics [baby steps I guess]
okay with that out of the way, we move on to the code. and better than talking about it, I’ll show you the process
Started with dynamic stars
then I moved on to building the rocket. To be honest, this was the point where I was about to cop out and just convert the sketch image to an image and just animate that, but then that beats the point of practicing CSS so yeah I soldiered on and started drawing with CSS. [so proud that I did that]
wooohoooo it’s complete! [happy dance] Now I move on to making the clouds
alright now I try to animate the rocket here we go
cool! just a couple of final touches and …
YAY! I’m pretty proud of myself ^-^
Here’s a link to the demo.
Have a lovely day and happy coding 🙂