The descriptions above are a brief overview of the topic. Go through the recommended resources to get in-depth explanations of CSS Illustration.
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 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.
The majority of my coding for this chapter was for two main projects.
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.
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.
My plans for the next chapter are:
Working on CSS Framework (Bootstrap 5) and building projects on them.
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.