Read on Twitter
You want to create CSS illustrations? 
You can!
There's no secret wizardry, I promise
What it takes:
• Time
• Patience
• Practice
• Planning
• Knowing your way around certain properties
Let's go through some of the stand out properties!
<
>
You can!
There's no secret wizardry, I promise
What it takes:
• Time
• Patience
• Practice
• Planning
• Knowing your way around certain properties
Let's go through some of the stand out properties!
<
>
Aside from being able to size an element, we need to know how to position it 
One trick is to give our element a random color and reduced opacity so we can see what we're doing!
https://css-tricks.com/almanac/properties/p/position/
One trick is to give our element a random color and reduced opacity so we can see what we're doing!
https://css-tricks.com/almanac/properties/p/position/
Once an element is in place, it needs the right shape 
border-radius will aid you with creating complex curves https://egghead.io/lessons/css-use-the-border-radius-css-property-to-define-horizontal-and-vertical-radius
border-radius will aid you with creating complex curves
https://egghead.io/lessons/css-use-the-border-radius-css-property-to-define-horizontal-and-vertical-radius
But, you could also use clip-path
That will also allow you to create curves. But it can also help with polygons and clipping parts of an element away
Be mindful though. You will lose that border!
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
That will also allow you to create curves. But it can also help with polygons and clipping parts of an element away
Be mindful though. You will lose that border!
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
Aside from them, the overflow property should get you where you want!
Think outside the box. Use elements to hide other elements
https://codepen.io/jh3y/pen/gOaVJMB via @CodePen
Think outside the box. Use elements to hide other elements
https://codepen.io/jh3y/pen/gOaVJMB via @CodePen
Once you've got the shape you want and it's roughly in the right position, the transform property is another to check out!
You might want to rotate or skew your shape.
You may even want to use a translation for positioning too! https://css-tricks.com/almanac/properties/t/transform/
You might want to rotate or skew your shape.
You may even want to use a translation for positioning too! https://css-tricks.com/almanac/properties/t/transform/
Now we have the shape we want and it's roughly in the correct place, we need to give it the colors we need
The "background" property is going to do the majority of the heavy lifting
Using multiple background images can be very powerful! https://css-tricks.com/almanac/properties/b/background/
The "background" property is going to do the majority of the heavy lifting
Using multiple background images can be very powerful! https://css-tricks.com/almanac/properties/b/background/
Layering linear and radial gradients will give your illustrations a more "Realistic" effect by giving the impression of lighting
Consider this pen where you can turn shading on and off https://codepen.io/jh3y/pen/OJMNyVg
Consider this pen where you can turn shading on and off
https://codepen.io/jh3y/pen/OJMNyVg
Which leads nicely onto the use of box-shadow
Much like background, we can use multiple box-shadows layered up for an element
This gives us another opportunity to provide depth and shading to our illustrations https://css-tricks.com/snippets/css/css-box-shadow/
Much like background, we can use multiple box-shadows layered up for an element
This gives us another opportunity to provide depth and shading to our illustrations
https://css-tricks.com/snippets/css/css-box-shadow/
Getting familiar with those properties will get you far with CSS illustration 
Aside from knowing them, it's a case of approach. Thinking in layers can help a lot.
There are some other tricks too that I cover here
https://css-tricks.com/advice-for-complex-css-illustrations/
</>
Aside from knowing them, it's a case of approach. Thinking in layers can help a lot.
There are some other tricks too that I cover here
https://css-tricks.com/advice-for-complex-css-illustrations/
</
>
p.s I have some more CSS materials on the way covering all kinds of things 
But, I'm keen to know what things people are really interested in seeing. Reach out and let me know!
But, I'm keen to know what things people are really interested in seeing. Reach out and let me know!
