DEV Community

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

Decoding CSS art (🎨+πŸ’»)

Manaswini on July 29, 2020

Backstory alert!! When I joined Twitter, I came across people who were posting CSS illustrations and I was extremely intrigued and confu...
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 πŸ˜„

Collapse
 
ahmadfahd profile image
Ahmad Al-Howimel

Thanks, very helpful

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome!!

Collapse
 
withtoms profile image
Coding with TomsπŸ’»β˜•πŸš€

It is very recent since I discovered CSS art and Iam completely blown away by the the idea!

Collapse
 
thisismanaswini profile image
Manaswini

Yeah CSS art is mindblowing😊

Collapse
 
brendamichellle profile image
Brenda Michelle

Thank you for sharing Manaswini. This is a great post full of resources. πŸ˜ŠπŸ‘Œ Clip-path and pseudo elements are 2 I've been trying to learn more about.

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome Brenda 😊 Feel free to reach out if you need any help with those!

Collapse
 
jakeerc profile image
Jakeer

Thanks, helpfull

Collapse
 
thisismanaswini profile image
Manaswini

You're welcome!! Glad it was helpful😊

Collapse
 
alain profile image
SOUOP

thx so much

Collapse
 
kiraniyerdev profile image
Kiran Iyer

Wonderful article MS. Im now finally un-confused with all of these terms. I need to dive in deeper and practice to get the hang of it.