DEV Community

Cover image for Decoding CSS art (🎨+πŸ’»)
Manaswini
Manaswini

Posted on

Decoding CSS art (🎨+πŸ’»)

Backstory alert!!

When I joined Twitter, I came across people who were posting CSS illustrations and I was extremely intrigued and confused at the same time. It was not until a month later that I took a deep dive into CSS and started experimenting, that I actually felt like I had achieved a good enough understanding of CSS art. In this post, I've tried to list out all the important things that I've learnt and also some resources that I use frequently.

CSS illustration of a girl

What is CSS art anyways? πŸ€”

Making CSS art boils down to manipulating the shapes of HTML elements ( mostly divs or spans ) using CSS properties and getting them to look the way you want by gluing them together using CSS positioning.

With me till now? Great, now let's have a look at some CSS properties that I use the MOST while making CSS art and also some resources that will hopefully help you better visualize them.

Border radius

This property helps us round the corners of an otherwise rectangular-shaped div or span. I've tried to give you an overview of how this property works in the following image.

Through these numbers, we tell CSS how much of each side it should take to round a given corner.
Border-radius explanation image

Here's a tool that helps in visualizing how border-radius works : 8 point border radius

Flexbox

I use flexbox heavily to center elements and for easy positioning of elements. In the following image, I applied a display of flex, flex-direction of column, justify-content center and align-items center to the container on the right side. On doing so, I could skip the extra positioning that I would have to do if I hadn't used Flexbox, like in the left container.

Flex box on Ice-cream containers

Personally, I learnt flex box from the Freecodecamp curriculum. Here are some other tools that are very useful to help gain a better grip on Flexbox:
1) Flexbox visualizer by Paul Trone
2) Flexbox froggy

Clip-path

Clip-path helps us create almost any polygon that we want. Using this, we can specify a given area on the div or span that we want to show rather than showing its entire rectangular shape.
Bennett Feely's clip path maker is an extremely handy tool that I use frequently to visualize and work with this property.

View port dimensions

Something that I realized recently is to use view port dimensions ( vw, vh, vmin, vmax ) to make the illustrations responsive. View port dimensions help us declare lengths in terms of the view port width or height. The most important among these, at least in the context of CSS art, is the vmin unit.
It helps us declare the widths and heights of our HTML elements in terms of the minimum value among the view port width and the view port height. This way we can ensure that no matter what device you view the illustration on, it looks exactly the same.

Relative and absolute positioning

When we give a relative position to an HTML element, we move it with respect to itself. But when we talk about absolute positioning, we position the element with respect to its parent. In this case the parent should have relative positioning.
The following image illustrates what I'm talking about.
If I add right:10px; to the inner box in the CSS stylesheet, here is how the result would differ based on whether the inner box is positioned relatively or absolutely.

Relative position

Absolute position

Pseudo elements

These refer to the ::before and ::after elements. Don't worry if you haven't heard of them or haven't used them before. Here is a series on YouTube by Kevin Powell, that does an amazing job at explaining the ins and outs of pseudo elements.
Part one, Part two and Part three.

Extras ✨

Some other CSS properties that you could use to add depth and definition to your illustrations :

Box-shadow

Here is an article from CSS Tricks which when read along with the MDN docs on box-shadow can help clear up a lot things about how box-shadows work.
You can use this Box shadow generator to visualize how these work.

Gradients ( linear and radial )

Here's one of my favorite articles on CSS gradients from CSS tricks.

Brag alertβ€΅οΈβ€΅οΈβ€΅οΈπŸ˜‚πŸ˜…

Here is a small collection of illustrations that I made using CSS.

Scuba divers CSS illustration
Guitar and sitar CSS illustration
CSS GIF Snapshot


That's it folks! Thank you for reading till the endπŸŽ‰πŸŽ‰ I really hope you had something to take way. If this helped you in any way, I'd love to hearπŸ”Š from you. You can catch me on Twitter or Codepen 😊

Have a great day( or night )!!πŸ‘‹πŸ‘‹

Top comments (32)

Collapse
 
kriska profile image
Kristina Gocheva

Good job with the images, they look great! As an idea for your next article I'd suggest showing step by step the image progress, or showing the CSS itself. This article here is like a typical drawing article.
how-to-draw-meme

Collapse
 
thisismanaswini profile image
Manaswini

Yeah I was thinking about the same thing. I'll do that😊

Collapse
 
pandaquests profile image
Panda Quests

Have a look here
β€œSecrets of drawing with CSS and a single DIV” by pandaquests link.medium.com/wQrKu8V4Wbb

Collapse
 
ziizium profile image
Habdul Hazeez

Nice write up, you can also check out the following articles:


If you are a visual learner and you'd like to dive deeper into CSS positioning you can read Learn CSS Positioning by Ahmad Shadeed.

Collapse
 
thisismanaswini profile image
Manaswini

Thank you so much for sharing😊

Collapse
 
pandaquests profile image
Panda Quests

Or thus one (sorry don't want to spam. But you might like it)
β€œSecrets of drawing with CSS and a single DIV” by pandaquests link.medium.com/wQrKu8V4Wbb

Collapse
 
favouritejome profile image
Favourite Jome

Thanks for sharing, i need to need to work on clip paths and viewport units

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome😊 Let me know if I can help you in any way!!

Collapse
 
favouritejome profile image
Favourite Jome

I will

Collapse
 
ashwinsharmap profile image
Ashwin Sharma P

Good one Manaswini. Superb explanation.

Collapse
 
thisismanaswini profile image
Manaswini

Thanks a lot Ashwin πŸ˜‡

Collapse
 
champernet profile image
Timur Iskakov • Edited

Thank you for sharing!
Clip-path maker is a cool stuff! Bookmarked it

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome! It is very cool indeed!

Collapse
 
ravikeshare profile image
Ravi

Thanks, visualization will help to have deeper understanding of CSS.

Collapse
 
murthyug profile image
U G Murthy

This is cool. Thanks for sharing.

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome😊

Collapse
 
mayankjoshi profile image
mayank joshi

This is a very insightful post will brilliant examples Manaswini. πŸŽ‰

Collapse
 
thisismanaswini profile image
Manaswini

Thanks Mayank 😊

Collapse
 
fossheim profile image
Sarah

LOVE the things you made, great work! πŸ€©πŸ‘πŸ»

Collapse
 
thisismanaswini profile image
Manaswini

Thank you so much Sarah😊

Collapse
 
krrish96 profile image
Sai Krishna

Great Article Manaswini!

Keep Going

Collapse
 
thisismanaswini profile image
Manaswini

Thank you Sai πŸ˜„