Cute animal - eleftheria batsou

My journey with pure CSS images

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

 

tiger - eleftheria

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:

  1. The theme was FOOD!

  2. I started animating

 

 

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

pizza - pure css -eleftheria

CodeVideo-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:

  1. Superheroes

  2. Animation

  3. 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!

 

codevideo-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:

  • I got better at CSS/SCSS, I also learned about animations.

  • I learned new tools about colors, shapes, and animations.

  • I connected with people all around the world on Codepen, Twitter, and Youtube.

  • I shared my knowledge on Codepen and Youtube and I hope I helped and inspired other developers.

  • I learned to be more patient and focused on my image and my code rather than get distracted by little things.

  • I got better at time management.

  • I did not get better at drawing!

 

Thank you for taking the time to read my story.