Thread by @Prathkum

A beginner's guide to getting started with CSS art and illustration

Thread🧵👇🏻

Ok I consider CSS arts as the combination of some CSS properties

- Position
- border
- background
- animation
- transform
- perspective
- box-shadow

{ 1 / nn }

Mastering the above mentioned properties can complete 90% of the work for you

Although the process is little tough but tough things are cool 😎

{ 3 / nn }

You need an online editor for creating your CSS arts.

I prefer CodePen for this because it displays your creations on the home page if they are great

🔗 codepen.io

{ 4 / nn }

Alright! Don't try to create a complex art for the first time. Start with some pretty basic shapes like square, circle and triangle

CSS arts is nothing but the combination of shapes.

Look at the breakdown of this coffee mug 👇🏻

{ 5 / nn }

If you look carefully, you will find the entire art is nothing but the shapes. And not only shapes but the basic shapes like square, rectangle, circle and triangle.

Creating shapes are very easy. Check out my this thread

https://twitter.com/Prathkum/status/1351109173841432577?s=20

{ 6 / nn }

Moving further, positioning concept is another thing you need to learn for CSS arts

Let me be honest here, positioning is little tricky but you can learn it with little practice. More specifically, absolute and relative position mostly used in it

{ 7 / nn }

There are plethora of tutorial available on YouTube you can learn from.

Check out this article on freecodecamp freecodecamp.org/news/learn-the…

I also have a detailed thread on it. Check it out

https://twitter.com/Prathkum/status/1355830282247692288?s=20

{ 8 / nn }

border-radius is yet another thing that plays an important role in order to make a CSS art looks beautiful

We all know this 👉🏼 border-radius: 10px;
But do you know this? 👉🏼 border-radius: 41% 46% 37% 37% / 18% 10% 28% 77%;

{ 9 / nn }

Border is formed using 8 clips. See the attched image for better understanding

{ 10 / nn }

You can create fancy border using this cool website. You can view the shape in real time and also customize the height and width of the shape as well.

{ 11 / nn }

9elements.github.io/fancy-border-r…

Alright mvoing further, You can create as many elements as possible in your HTML file but then it will be considered as HTML art (Joke) 😄

So try to minimize them and learn about pseudo elements ::before ::after.

{ 12 / nn }

As you can see in the attached image that we can create 3 things from one element using pseudo element ::before and ::after

{ 13 / nn }

Animation is another important property amazing CSS illustration.
There are lots of good tutorials available on the internet.

{ 14 / nn }

cssanimation.rocks

You can learn animation from my thread as well. In this thread I have covered some great visuals you can learn from

https://twitter.com/Prathkum/status/1366278875467153413?s=20

{ 15 / nn }

Check out this amazing website for CSS animation. Here you will find a detailes explanation of how animations works with quick examples

🔗 marksheet.io/css-animations…

{ 16 / nn }

All of this may sound a little daunting but not really as much as it sounds

Check out this amazing thread to learn how to make CSS art with simple steps

https://twitter.com/Prathkum/status/1345285253632569344?s=20

{ 17 / nn }

I think this is pretty much it for a quick overview. If you like this thread, share it with your connections ❤️

Peace out😉