Published on | Prototyping: From UX to Front End — Medium Eleftheria Batsou

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.

<a href="https://medium.com/media/f08e869e8f34d7d3a92024d8312a67ac/href">https://medium.com/media/f08e869e8f34d7d3a92024d8312a67ac/href</a>

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.

<a href="https://medium.com/media/41f99d43d2e1b1a2e291b3a42de46d5d/href">https://medium.com/media/41f99d43d2e1b1a2e291b3a42de46d5d/href</a>

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.

<a href="https://medium.com/media/6a09ab85210a0223014af7acdd17aab1/href">https://medium.com/media/6a09ab85210a0223014af7acdd17aab1/href</a>

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

<a href="https://medium.com/media/d0fd82c87292b0c0daff6fb6cdf0a284/href">https://medium.com/media/d0fd82c87292b0c0daff6fb6cdf0a284/href</a>

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

<a href="https://medium.com/media/4d8b029fe18b806abe9475e265bf0f54/href">https://medium.com/media/4d8b029fe18b806abe9475e265bf0f54/href</a>

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

<a href="https://medium.com/media/ed66f8c01da21317299b31a503e67f40/href">https://medium.com/media/ed66f8c01da21317299b31a503e67f40/href</a>

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

<a href="https://medium.com/media/a02af517cc54f4735630980a6170c7f4/href">https://medium.com/media/a02af517cc54f4735630980a6170c7f4/href</a>

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. If you feel inspired please share it.

It would be great if you could subscribe to my youtube channel as it helps me create more content.

Youtube | Codepen | GitHub | Twitter | Site

Originally published at http://eleftheriabatsou.com/content/pure-css-images.

My journey with pure CSS images was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

My journey with pure CSS images

Cool stuff, every week

More Articles