DEV Community

loading...
Cover image for #100DaysofCode Chapter 5 ~ CSS Illustration

#100DaysofCode Chapter 5 ~ CSS Illustration

lanrewaju profile image Lanre Fagbeyiro Updated on ・3 min read

vector-like-css-illustrations.jpg

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 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

CSS Shapes.png

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

CSS Emoji.png

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 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 @lanrecodes

Discussion

pic
Editor guide
Collapse
jlrxt profile image
Jose Luis Ramos T.

Información útil para los que empezamos en css. Gracias.👍

Collapse
lanrewaju profile image
Lanre Fagbeyiro Author

De nada y por favor síganme. Gracias