Thursday, 12 January 2017

Daily CSS Images Challenge

When this popped into my inbox, I thought it was a good way to discipline myself to learn rather than reading and storing the months of articles and tutorials.

"Each weekday for 50 days you will be sent an email challenge to create a pure CSS image."

So day 1, I received this.

I thought at first it was a typo and it was meant to be "Cube" as the tagline suggested it was simple plus the first task should be easy.  But after a bit of research on their twitter page at other entries, "Cub" was correct. So a baby animal was the first task? I felt like quitting already especially after viewing the complicated designs of others! 

Okay... I'll start super simple. No shame to that I say to myself... I have to start somewhere. Did a quick image search for animals created with shapes and chose a few simple ones that I liked the look of. (Plaguarisim alert - credit to the original artists) I knew triangles were not easy in css so I stuck to anything with circles, squares/rectangles.

Chose the hippo and llama and redrew them. Then calculated the number of shapes I would need for each.I liked the llama better and it had less shapes. I decided since I was doing such few shapes to make the task a bit harder and try make them scalable. So it would change it's size according to the screen width. 

Whilst tinkering with percentages long after midnight, I was doubting my decision! But I perserved and finished.

See the Pen Llama Cub #dailycssimages - day 1 by Tiffany Ong (@ongtiffany) on CodePen.

So 1 down... 49 to go. Pleased and proud but not sure how long I can keep this up. 

No comments: