Create your first CSS art
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🎨" title="Farbpalette" aria-label="Emoji: Farbpalette">
A thread
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🧵" title="Thread" aria-label="Emoji: Thread">
It contains all resources you need in order to create your first CSS art
https://abs.twimg.com/emoji/v2/... draggable="false" alt="👇🏻" title="Rückhand Zeigefinger nach unten (heller Hautton)" aria-label="Emoji: Rückhand Zeigefinger nach unten (heller Hautton)">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> First and foremost you need a online platform where you can make CSS arts so that other can also view them.
I suggest you
http://codepen.io">
http://codepen.io It&
#39;s an online code editor for testing and showcasing HTML, CSS and JS code snippets.
https://abs.twimg.com/emoji/v2/... draggable="false" alt="2️⃣" title="Tastenkappe Ziffer 2" aria-label="Emoji: Tastenkappe Ziffer 2"> An alternative of codepen is codesandbox.
Here you can also upload images for free
http://Codesandbox.io">
http://Codesandbox.io
https://abs.twimg.com/emoji/v2/... draggable="false" alt="3️⃣" title="Tastenkappe Ziffer 3" aria-label="Emoji: Tastenkappe Ziffer 3"> After setting up project you definitely need a good color scheme.
Picking up right color is always an important part for you arts/illustrations.
http://Colorhunt.co">
http://Colorhunt.co
https://abs.twimg.com/emoji/v2/... draggable="false" alt="4️⃣" title="Tastenkappe Ziffer 4" aria-label="Emoji: Tastenkappe Ziffer 4"> Let&
#39;s suppose you&
#39;re making a Teddy Bear so need to know the exact hex code of bear&
#39;s body color.
Here you can search for it and it&
#39;ll give you all relevant results.
http://encycolorpedia.com/ ">https://encycolorpedia.com/">...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="5️⃣" title="Tastenkappe Ziffer 5" aria-label="Emoji: Tastenkappe Ziffer 5"> Gradients: One of the essential things that gives youe CSS a real and amazing look
You can pick gradients by your choice from here
https://uigradients.com">
https://uigradients.com
https://abs.twimg.com/emoji/v2/... draggable="false" alt="6️⃣" title="Tastenkappe Ziffer 6" aria-label="Emoji: Tastenkappe Ziffer 6"> If you want to create your own gradient. There are lots of free sites available on the internet. But my favourite one is
https://cssgradient.io/ ">https://cssgradient.io/">...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="7️⃣" title="Tastenkappe Ziffer 7" aria-label="Emoji: Tastenkappe Ziffer 7"> Transform is the most important property that you should know in order to create realistic arts / illustration.
You can learn it from here
https://marksheet.io/css-transform.html">https://marksheet.io/css-trans...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="8️⃣" title="Tastenkappe Ziffer 8" aria-label="Emoji: Tastenkappe Ziffer 8"> Animation is another important property amazing CSS illustration.
There are pots of good tutorials available on Udemy, YouTube etc.
Here are some
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute">
http://cssanimation.rocks/ https://cssanimation.rocks/">... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> http://youtu.be/zHUpx90NerM
https://youtu.be/zHUpx90Ne... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> http://udemy.com/course/css-animation-transitions-and-transforms-creativity-course/
https://udemy.com/course/cs... class="Emoji" style="height:16px;" src=" https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔹" title="Kleine blaue Raute" aria-label="Emoji: Kleine blaue Raute"> http://marksheet.io/css-animations.html">https://marksheet.io/css-anima...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="9️⃣" title="Tastenkappe Ziffer 9" aria-label="Emoji: Tastenkappe Ziffer 9"> While creating CSS arts, almost every time you need to make different shapes.
So it&
#39;s good have a basic understanding that how to create shapes using CSS.
Give this article a read
https://css-tricks.com/the-shapes-of-css/#:~:text=CSS%20is%20capable%20of%20making,rectangles%20into%20circles%20and%20ovals.">https://css-tricks.com/the-shape...
https://abs.twimg.com/emoji/v2/... draggable="false" alt="🔟" title="Taste 10" aria-label="Emoji: Taste 10"> A lot of practice is required so start with the basic one if you really want to become a master in it.
I don&
#39;t think this thread will ever gonna end because there are other important properties as well like
- box-shadow
- overflow
- border-radius etc..
Explore them
https://abs.twimg.com/emoji/v2/... draggable="false" alt="✨" title="Funken" aria-label="Emoji: Funken">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1">
https://abs.twimg.com/emoji/v2/... draggable="false" alt="1️⃣" title="Tastenkappe Ziffer 1" aria-label="Emoji: Tastenkappe Ziffer 1"> YouTube channels
1. Coding Artist
2. Online Tutorials
3. CSS Art crash course by DesignCourse
Tip: mention @twtextapp on a Twitter thread with the keyword “unroll” to get a link to it.
Read on Twitter
