I was almost in the middle of my #100DaysOfCode challenge when I started noticing on my twitter feed several cute images with the hashtag #dailyCssImages. When I would click on them I could see the code, all the beauty of CSS/SCSS and just a few lines of HTML. I started digging on images and codes, I followed several developers on Codepen who created either simple and cute or complicated and detailed images. I was fascinated. Some days past and I found an article on Medium with the title “A Beginner’s Guide to Pure CSS Images”, written by the creator of Daily CSS Images challenge, named Michael Mangialardi. It was a tutorial on how to start creating CSS Images. I decided for my 44th day of #100DaysOfCode to give it a try. The result can be seen below. My pen’s description was:

Day: 44 of 100 I am planning on taking the challenge #dailycssimages. This is my first time trying to do a “koala” using only CSS. I followed this guide here. I am sure I will learn so many new things with the challenge, I love cute little things and that’s what I am planning to make. I have to admit I am awful at drawing by hand but I will challenge myself to get better with code and design.

After finished reading the article I was hooked. I subscribed to the 10-week challenge and the next day I received my first email. The theme was “Bear Cub”.

Honestly, my first image sucked.

Strange enough, although I didn’t like the result, I was happy with my creation!

The next day I changed my approach to designing images. I first made a simple sketch with pen and paper.

And then I tried to code it.

Ok, once again the result wasn’t great, but it was better than the firsts’ day.

Code | Video-tutorial

On the 3rd and 4th day I tried to add more details in my images and I google for some animal-inspiration.

I finally created these images:

Code | Video-tutorial

Code | Video-tutorial

On day 5, I designed a cute creature and people seemed to really like it.

Code

This boosted my confidence and I was ready for the 2nd week. I won’t get into a lot of detail… but I learned a couple of new tools and I tried to apply my recent knowledge into the images.

The tools were about: Gradient colors and Quick shapes.

The 3rd week must be on of my favorites for two reasons:

The theme was FOOD! I started animating

That week I made a pizza, a hamburger, a taco, a cheesecake and a pie!

Code | Video-tutorial

Code | Video-tutorial

The hamburger until today has 1019 views on codepen

Code | Video-tutorial

Code | Video-tutorial

Code

The 4th week started… with a detailed Frankenstein

Video-tutorial

… and ended with a monster!

Well, I gave my monster a twist, and I decided to make it cute.

You can clearly witness how I got better at coding but not at drawing.

Code | Video-tutorial

This pen has 1098 view on Codepen, and I have to admit, at this point I was quite proud of my work.

The 5th week was all about superheroes

As I like to be playful I combined three things:

Superheroes Animation MINIONS

Et voila the results:

Code | Video-tutorial

Code | Video-tutorial

On weeks 6 and 7 I designed icons and logos

The left image is how I found an apple app store icon on google images, and the right one is how I recreated it:

Code | Video-tutorial

As for the logos:

Code | Video-tutorial

Code | Video-tutorial

Code | Video-tutorial

Code | Video-tutorial

The elm logo was a bit tricky, so I took advantage of the Clippy tool:

Code | Video-tutorial

On my 40th day, I made a Nintendo 2DS

I got inspired by this image:

I quickly sketched a draw:

And after applying some CSS I had my own Nitendo 2DS:

code | video-tutorial

The 9th week I felt really inspired

I created five different images based on the same color palette.

The three of them were minimalistic and quite abstract.

code | video-tutorial

code | video-tutorial

code | video-tutorial

On day 44 I created a robot. First I google some images, when I found the one I liked most, I drew it, and then I code it.

code | video-tutorial

On day 45, I decided to do something similar, a space inspired mascot-robot!

code| video-tutorial

I finished the challenge with a delicious cake

Here are all my pure CSS images for the #dailyCssImages challenge

This pen has 2.523 views and that makes me extremely happy as I spent numerous hours searching and coding.

Conclusion

This challenge helped me in so many different ways: