100DaysofCode Chapter 5 ~ CSS Illustration

The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Illustration.

Introduction

Illustration is visual imagery that is best known for interpreting, depicting, explaining, and/or decorating the words in books, newspapers, and online media. Illustrations are the drawings you find to make websites and apps more user-friendly (think emojis).

What is CSS Illustration?

CSS Illustration is essentially designing a vector graphic but instead of using vector illustration software (i.e Illustrator, Affinity Designer, Sketch) you are using CSS code in place of your toolbar making use of some important CSS properties like pseudo elements, box shadows, gradients and clip-path.

Making CSS art/illustration is interesting and fun; It teaches you nuances of CSS that you might not normally work with, helps you see graphics (and problems in general) modularly and improves your speed when writing CSS. The good thing is you dont have to be an artist to do this.

I have completed 50 days in the 100 Days of Code Challenge. Below is a recap of everything I accomplished during this fifth chapter.

Projects

The majority of my coding for this chapter was for two main projects.

CSS Shapes

For this project, I created a square by adding the following properties to it: background color, height and width. For the circle I added all the properties I added to the square and included a border radius of 50% and finally, for the triangle, I gave zero values to both the height and width, gave the border-bottom a color and made the border-left and border-right transparent. You can check out this project on CodePen and GitHub.

CSS Emoji

For this project, I created a smiley-face emoji by first creating a div for the head, left eye, right eye and mouth in HTML. Then I used CSS to give shapes of positions for each div element. As you might expect, you can also find this project on CodePen and GitHub.

Recommended Resources

• Michael Mangialardi A Beginners Guide to Pure CSS Images

• CSS Tricks The Shapes of CSS

• CSS Tricks Advice for Complex CSS Illustration

• freeCodeCamp CSS Shapes Explained

• MDNs Clip Path

• Nadia Laasri 3 Secrets Behind Single Div CSS Art

• Nadia Laasri Make Your First CSS Art

• Agathe Cocco How to Create Pure Illustrations and Animate
  Them Part 1

• Suzanne Aichison Get Started with CSS Art
  

• Free Frontend 17 CSS Illustrations

• CSS Clip-path Maker

Whats Next?

My plans for the next chapter are:

• Working on CSS Framework (Bootstrap 5) and building projects on them.

• Continue learning JavaScript.

Conclusion

I am writing this post to help other beginners like myself understand this topic better. I hope you enjoyed this post and that reading it provided some useful information.

I have only been coding for a few months now, so there is still a lot for me to learn. I would love if you could give me any feedback on my projects.

Also, if you know any other recommended resources not mentioned on the list and you want to share, please feel free to drop the link in the comment section.

To see my daily progress on the #100DaysofCode challenge, follow me on Twitter @lanre__waju.