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.
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:
On day 5, I designed a cute creature and people seemed to really like it.
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!
The hamburger until today has 1019 views on codepen
The 4th week started… with a detailed Frankenstein
… 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.
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:
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:
As for the logos:
The elm logo was a bit tricky, so I took advantage of the Clippy tool:
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:
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.
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.
On day 45, I decided to do something similar, a space inspired mascot-robot!
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!
Originally published at http://eleftheriabatsou.com/content/pure-css-images.