The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Illustration.
Introduction
An illustration is a 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 don’t 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 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
What’s 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 it 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