Published on <a href="https://blog.prototypr.io/my-journey-with-pure-css-images-d5b561e51d2f?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Eleftheria Batsou 
I was almost in the middle of my #100DaysOfCode challenge when I started noticing on my <a href="https://twitter.com/BatsouElef">twitter</a> 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 href="https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2">A Beginner’s Guide to Pure CSS Images</a>”, written by the creator of Daily CSS Images challenge, named <a href="https://medium.com/@michaelmangial1?source=post_header_lockup">Michael Mangialardi</a>. 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:
<blockquote>Day: 44 of 100</blockquote>
<blockquote>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 <a href="https://medium.com/coding-artist/a-beginners-guide-to-pure-css-images-ef9a5d069dd2#.yznl0pgs6">here</a>.</blockquote>
<blockquote>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.</blockquote>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FZLqaby%3Fheight%3D600%26slug-hash%3DZLqaby%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FZLqaby&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.ZLqaby.small.c1c3c745-4d01-4e46-8c9a-34308d384e4d.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/f08e869e8f34d7d3a92024d8312a67ac/href">https://medium.com/media/f08e869e8f34d7d3a92024d8312a67ac/href</a></iframe>
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”.
<blockquote>Honestly, my first image sucked.</blockquote>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FzNbYVz%3Fheight%3D600%26slug-hash%3DzNbYVz%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FzNbYVz%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.zNbYVz.small.d169a59f-eb3d-4ba6-aeff-9b96779e9705.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/41f99d43d2e1b1a2e291b3a42de46d5d/href">https://medium.com/media/41f99d43d2e1b1a2e291b3a42de46d5d/href</a></iframe>
<blockquote>Strange enough, although I didn’t like the result, I was happy with my creation!</blockquote>
The next day I changed my approach to designing images. I first made a simple sketch with pen and paper.
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*HhSuxADInkJG9Lv2.">
And then I tried to code it.
Ok, once again the result wasn’t great, but it was better than the firsts’ day.
<img alt="" src="https://cdn-images-1.medium.com/max/605/0*u8F2En_ZKsWF-jZv.">
<a href="https://codepen.io/EleftheriaBatsou/pen/xgBJBr">Code</a> | <a href="https://youtu.be/zyk-SEVUk_w">Video-tutorial</a>
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:
<img alt="" src="https://cdn-images-1.medium.com/max/514/0*HOH2h8dKKCD_V4iX.">
<a href="https://codepen.io/EleftheriaBatsou/pen/OpVaeK">Code</a> | <a href="https://youtu.be/ZY8malKonjE">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/489/0*mjBYCoYWP_H7eW1L.">
<a href="https://codepen.io/EleftheriaBatsou/pen/BWorPM">Code</a> | <a href="https://youtu.be/DTUgsyM8zms">Video-tutorial</a>
On day 5, I designed a cute creature and people seemed to really like it.
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2F6iFlhmejGnc%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3D6iFlhmejGnc&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6iFlhmejGnc%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/6a09ab85210a0223014af7acdd17aab1/href">https://medium.com/media/6a09ab85210a0223014af7acdd17aab1/href</a></iframe>
<a href="https://codepen.io/EleftheriaBatsou/pen/LWGpGZ">Code</a>
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: <a href="https://webgradients.com/?ref=producthunt">Gradient colors</a> and <a href="http://bennettfeely.com/clippy/">Quick shapes.</a>
<h3>The 3rd week must be on of my favorites for two reasons:</h3>
<ol>
<li>The theme was FOOD!</li>
<li>I started animating</li>
</ol>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FJWWzQB%3Fheight%3D600%26slug-hash%3DJWWzQB%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FJWWzQB%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.JWWzQB.small.c86d0fdd-9fcc-4815-9a35-2dc90a6eed0a.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/d0fd82c87292b0c0daff6fb6cdf0a284/href">https://medium.com/media/d0fd82c87292b0c0daff6fb6cdf0a284/href</a></iframe>
That week I made a <a href="https://codepen.io/EleftheriaBatsou/pen/JWWzQB/">pizza</a>, a <a href="https://codepen.io/EleftheriaBatsou/pen/gmWwEL">hamburger</a>, a <a href="https://codepen.io/EleftheriaBatsou/pen/BWRvOL">taco</a>, a <a href="https://codepen.io/EleftheriaBatsou/pen/jBwyEd">cheesecake</a> and a <a href="https://codepen.io/EleftheriaBatsou/pen/xqLVjo">pie</a>!
<img alt="" src="https://cdn-images-1.medium.com/max/575/0*EspqVbKBbM19z7Sa.">
<a href="http://codepen.io/EleftheriaBatsou/pen/JWWzQB/">Code</a> | <a href="https://www.youtube.com/watch?v=ehYPIP5u32U&amp;feature=youtu.be">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/518/0*KCAlr2Qdtp0w-Q3O.">
<a href="https://codepen.io/EleftheriaBatsou/pen/gmWwEL">Code</a> | <a href="https://youtu.be/lYMSWQ9DMkk">Video-tutorial</a>
The <a href="https://codepen.io/EleftheriaBatsou/pen/gmWwEL?editors=1000">hamburger</a> until today has 1019 views on <a href="https://codepen.io/EleftheriaBatsou/">codepen</a>
<img alt="" src="https://cdn-images-1.medium.com/max/630/0*jUtDSO3M3Hk9qNpr.">
<a href="https://codepen.io/EleftheriaBatsou/pen/BWRvOL">Code</a> | <a href="https://youtu.be/JLSuaCIgbV0">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/605/0*m_H0Qf0MXRoISY_n.">
<a href="https://codepen.io/EleftheriaBatsou/pen/jBwyEd">Code</a> | <a href="https://youtu.be/QkqEbGOtQ1o">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/679/0*dvHnqH_pdtOnUwM2.">
<a href="https://codepen.io/EleftheriaBatsou/pen/xqLVjo">Code</a>
<h3>The 4th week started… with a detailed Frankenstein</h3>
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*5aaC5adAKH5bffHc."><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FXMeWar%3Fheight%3D600%26slug-hash%3DXMeWar%26default-tabs%3Dcss%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FXMeWar%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.XMeWar.small.27966728-0255-4444-8186-ecb9b690447f.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/4d8b029fe18b806abe9475e265bf0f54/href">https://medium.com/media/4d8b029fe18b806abe9475e265bf0f54/href</a></iframe>
<a href="https://youtu.be/n68ZPKzCk3I">Video-tutorial</a>
… and ended with a monster!
Well, I gave my monster a twist, and I decided to make it cute.
<blockquote>You can clearly witness how I got better at coding but not at drawing.</blockquote>
<img alt="" src="https://cdn-images-1.medium.com/max/502/0*FdbGegljPEoKMBqH."><img alt="" src="https://cdn-images-1.medium.com/max/600/0*l0ecGlaQ3Hz48LO-.">
<a href="https://codepen.io/EleftheriaBatsou/pen/KWRWJB">Code</a> | <a href="https://youtu.be/ISvQdRwaefE">Video-tutorial</a>
This pen has 1098 view on Codepen, and I have to admit, at this point I was quite proud of my work.
<h3>The 5th week was all about superheroes</h3>
As I like to be playful I combined three things:
<ol>
<li>Superheroes</li>
<li>Animation</li>
<li>MINIONS</li>
</ol>
Et voila the results:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*cyprD-jcrQBBA8Mj."><img alt="" src="https://cdn-images-1.medium.com/max/600/0*JVCv_FInAWmnO2K4.">
<a href="https://codepen.io/EleftheriaBatsou/pen/yMjGxE">Code</a> | <a href="https://youtu.be/UFrPBXC_q54">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/955/0*Iz8vM6VeiXhx1rUG."><img alt="" src="https://cdn-images-1.medium.com/max/539/0*kp7-3TjpBQT5FgQc.">
<a href="https://codepen.io/EleftheriaBatsou/pen/yMqXed">Code</a> | <a href="https://youtu.be/DTyh1Y36tzc">Video-tutorial</a>
<h3>On weeks 6 and 7 I designed icons and logos</h3>
The left image is how I found an apple app store icon on google images, and the right one is how I recreated it:
<img alt="" src="https://cdn-images-1.medium.com/max/352/0*oMNpgpS7Fsd9hpSF."><img alt="" src="https://cdn-images-1.medium.com/max/584/0*b0tMp_9zP6k424Ss.">
<a href="https://codepen.io/EleftheriaBatsou/pen/KWBBvj">Code</a> | <a href="https://youtu.be/vI_67G6bhuI">Video-tutorial</a>
As for the logos:
<img alt="" src="https://cdn-images-1.medium.com/max/544/0*k9B5Ja17PrFiBpWX.">
<a href="https://codepen.io/EleftheriaBatsou/pen/EWdrNL">Code</a> | <a href="https://youtu.be/7dtT5J6vUqU">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/340/0*G7WNRGHUHjdLCgql.">
<a href="https://codepen.io/EleftheriaBatsou/pen/aJQbmg">Code</a> | <a href="https://youtu.be/UMg7f0DQ7gk">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/465/0*MiSyjnZeJbJzRV4W.">
<a href="https://codepen.io/EleftheriaBatsou/pen/aJQjLg">Code</a> | <a href="https://youtu.be/7WbwH2RZtnw">Video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/455/0*DivVugoYXbpq69NX.">
<a href="https://codepen.io/EleftheriaBatsou/pen/Opdyyy">Code</a> | <a href="https://youtu.be/84ktb8KMIlk">Video-tutorial</a>
The elm logo was a bit tricky, so I took advantage of the <a href="http://bennettfeely.com/clippy/">Clippy tool</a>:
<img alt="" src="https://cdn-images-1.medium.com/max/314/0*1h9Xa54xr7jhopGd."><img alt="" src="https://cdn-images-1.medium.com/max/308/0*wnivceCE3aSU7EhZ."><img alt="" src="https://cdn-images-1.medium.com/max/304/0*ZvEW-Toz5ILIHDfX."><img alt="" src="https://cdn-images-1.medium.com/max/315/0*0rxH__GnDxjviZdy."><img alt="" src="https://cdn-images-1.medium.com/max/444/0*uxyCFAJSnUFDr6xj.">
<a href="https://codepen.io/EleftheriaBatsou/pen/wJOYZb">Code</a> | <a href="https://youtu.be/ZNBc1BsJZnQ">Video-tutorial</a>
<h3>On my 40th day, I made a Nintendo 2DS</h3>
I got inspired by this image:
<img alt="" src="https://cdn-images-1.medium.com/max/360/0*sEzcZop27s5W1kKb.">
I quickly sketched a draw:
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*61ufFuq-7D4TvH6R.">
And after applying some CSS I had my own Nitendo 2DS:
<img alt="" src="https://cdn-images-1.medium.com/max/545/0*fL1OjLMayD94rZqo.">
<a href="https://codepen.io/EleftheriaBatsou/pen/EmxxoY">code</a> | <a href="https://youtu.be/GAK84tsuWm4">video-tutorial</a>
<h3>The 9th week I felt really inspired</h3>
I created five different images based on the same color palette.
The three of them were minimalistic and quite abstract.
<img alt="" src="https://cdn-images-1.medium.com/max/536/0*3SUxZ0ua_T3XuM1_.">
<a href="https://codepen.io/EleftheriaBatsou/pen/JNoGyb">code</a> | <a href="https://youtu.be/QViivvQeOAc">video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/508/0*p6LaopMIJMJAepeh.">
<a href="https://codepen.io/EleftheriaBatsou/pen/mmyExr">code</a> | <a href="https://youtu.be/fXxElHpqTTA">video-tutorial</a>
<img alt="" src="https://cdn-images-1.medium.com/max/514/0*IbtVsxFP_v32oWb1.">
<a href="https://codepen.io/EleftheriaBatsou/pen/RVNjqG">code</a> | <a href="https://youtu.be/xhiQT2lFJnw">video-tutorial</a>
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.
<img alt="" src="https://cdn-images-1.medium.com/max/432/0*J6RXv5jdVNChgCw_."><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*ggarH_FUu0Hqp7hX."><img alt="" src="https://cdn-images-1.medium.com/max/478/0*Zk1gXudCadUyVdKb.">
<a href="https://codepen.io/EleftheriaBatsou/pen/JNoLPe">code</a> | <a href="https://youtu.be/RwqK7VfBkxc">video-tutorial</a>
On day 45, I decided to do something similar, a space inspired mascot-robot!
<img alt="" src="https://cdn-images-1.medium.com/max/1024/0*7aXcZMMWT4XKk7bI."><img alt="" src="https://cdn-images-1.medium.com/max/491/0*toETfyWdY6OSOk74.">
<a href="https://codepen.io/EleftheriaBatsou/pen/dWGXar">code</a>| <a href="https://youtu.be/3xHw1gor0EI">video-tutorial</a>
<blockquote>I finished the challenge with a delicious cake</blockquote>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fwww.youtube.com%2Fembed%2FgCKEuRSt1R8%3Ffeature%3Doembed&amp;url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DgCKEuRSt1R8&#038;image=https%3A%2F%2Fi.ytimg.com%2Fvi%2FgCKEuRSt1R8%2Fhqdefault.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=youtube" width="854" height="480" frameborder="0"><a href="https://medium.com/media/ed66f8c01da21317299b31a503e67f40/href">https://medium.com/media/ed66f8c01da21317299b31a503e67f40/href</a></iframe>
<h3>Here are all my pure CSS images for the #dailyCssImages challenge</h3>
<iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fembed%2Fpreview%2FWRPBPg%3Fheight%3D600%26slug-hash%3DWRPBPg%26default-tabs%3Dhtml%2Cresult%26host%3Dhttps%3A%2F%2Fcodepen.io%26embed-version%3D2&amp;url=https%3A%2F%2Fcodepen.io%2FEleftheriaBatsou%2Fpen%2FWRPBPg%2F&#038;image=https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fi.cdpn.io%2F503980.WRPBPg.small.514a4663-5d8a-4f12-afbf-d9f414383981.png&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=codepen" width="800" height="600" frameborder="0"><a href="https://medium.com/media/a02af517cc54f4735630980a6170c7f4/href">https://medium.com/media/a02af517cc54f4735630980a6170c7f4/href</a></iframe>
This pen has 2.523 views and that makes me extremely happy as I spent numerous hours searching and coding.
<h3>Conclusion</h3>
This challenge helped me in so many different ways:
<ul>
<li>I got better at CSS/SCSS, I also learned about animations.</li>
<li>I learned new tools about colors, shapes, and animations.</li>
<li>I connected with people all around the world on Codepen, Twitter, and Youtube.</li>
<li>I shared my knowledge on Codepen and Youtube and I hope I helped and inspired other developers.</li>
<li>I learned to be more patient and focused on my image and my code rather than get distracted by little things.</li>
<li>I got better at time management.</li>
<li>I did not get better at drawing!</li>
</ul>
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 <a href="https://www.youtube.com/c/EleftheriaBatsou">channel</a> as it helps me create more content.
<a href="https://www.youtube.com/c/EleftheriaBatsou">Youtube</a> | <a href="https://codepen.io/EleftheriaBatsou">Codepen</a> | <a href="https://github.com/EleftheriaBatsou">GitHub</a> | <a href="https://twitter.com/BatsouElef">Twitter</a> | <a href="http://eleftheriabatsou.com/">Site</a>
Originally published at <a href="http://eleftheriabatsou.com/content/pure-css-images">http://eleftheriabatsou.com/content/pure-css-images</a>.
<img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=d5b561e51d2f" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou">
<hr>
<a href="https://blog.prototypr.io/my-journey-with-pure-css-images-d5b561e51d2f">My journey with pure CSS images</a> was originally published in <a href="https://blog.prototypr.io">Prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

My journey with pure CSS images

Top Stories