Read on Twitter
How to make single div(any element) CSS art - A mini thread 
Spoiler: No magic
All that's required is patience and knowing your way around some properties 
Let's gooo!
Starting with this timelapse
Spoiler: No magic
All that's required is patience and knowing your way around some properties Let's gooo!
Starting with this timelapse
The "Big" trick? Layered background images 
With CSS you can give many backgrounds to an element. Comma separate background images and you're golden
What would this give for a 60px square?
https://codepen.io/jh3y/pen/eYzNGPP
With CSS you can give many backgrounds to an element. Comma separate background images and you're golden
What would this give for a 60px square?
https://codepen.io/jh3y/pen/eYzNGPP
It's common that you'll not repeat your background image layers.
Don't repeat yourself(DRY) and drop:
"background-repeat: no-repeat;"
Beneath your background declaration
Don't repeat yourself(DRY) and drop:
"background-repeat: no-repeat;"
Beneath your background declaration
If you watched the timelapse above, it slows where the order of background images are swapped
Layered backgrounds are a little counter-intuitive because they work the opposite way to z-index stacking. The first is the highest, the last the lowest.
Save the last for backdrop!
Layered backgrounds are a little counter-intuitive because they work the opposite way to z-index stacking. The first is the highest, the last the lowest.
Save the last for backdrop!
What shapes can we make? Pretty much anything that we can > 1 element
Examples? Create quadrilaterals using a linear-gradient from one color to the same color. Create circles with a radial-gradient from one color to transparent with a color stop. https://codepen.io/jh3y/pen/ExyjwoO
Examples? Create quadrilaterals using a linear-gradient from one color to the same color. Create circles with a radial-gradient from one color to transparent with a color stop. https://codepen.io/jh3y/pen/ExyjwoO
How about a triangle?
1. Use a linear-gradient.
2. One side transparent, the other the color you want.
3. Define the angle.
4. Use a color stop to create a sharp line
https://codepen.io/jh3y/pen/xxOGXae
1. Use a linear-gradient.
2. One side transparent, the other the color you want.
3. Define the angle.
4. Use a color stop to create a sharp line
https://codepen.io/jh3y/pen/xxOGXae
Get comfortable with the background-image property
If a shape seems complex, break it down into smaller shapes and layer up
Consider the spectacles in the demo above. It's 11 background images positioned accordingly. 4 for each frame, 1 for the bridge, 1 for each lens
If a shape seems complex, break it down into smaller shapes and layer up
Consider the spectacles in the demo above. It's 11 background images positioned accordingly. 4 for each frame, 1 for the bridge, 1 for each lens
Which leads to an important part!
background-size && background-position are what allow you to create and move the building blocks around your element
We are using the shorthand style structure for the backgrounds.
We could break it up but that gets confusing!
background-size && background-position are what allow you to create and move the building blocks around your element
We are using the shorthand style structure for the backgrounds.
We could break it up but that gets confusing!
Check out this demo where you can change the background-position and background-size for a background-image
Try changing the coefficients or the bounds and see how it reacts
https://codepen.io/jh3y/pen/MWewObx
Try changing the coefficients or the bounds and see how it reacts
https://codepen.io/jh3y/pen/MWewObx
That's the bulk of the "magic" behind single element CSS art 
But, it's worth discussing some tips to make life a little easier
But, it's worth discussing some tips to make life a little easier
Split your background images up into variables
Then you can easily identify what's what. Consider this demo. Each component is identifiable. It also makes switching the order around much easier to see
Try changing some property values
https://codepen.io/jh3y/pen/zYBGPbq
Then you can easily identify what's what. Consider this demo. Each component is identifiable. It also makes switching the order around much easier to see
Try changing some property values
https://codepen.io/jh3y/pen/zYBGPbq
Using CSS variables to power things is huge
In that demo, you can control sizing, colors, features, etc.
Because of scope, you can generate many unique combinations by using JavaScript. Consider the 100 <hr/> demo
https://codepen.io/jh3y/pen/GRqgYWZ
In that demo, you can control sizing, colors, features, etc.
Because of scope, you can generate many unique combinations by using JavaScript. Consider the 100 <hr/> demo
https://codepen.io/jh3y/pen/GRqgYWZ
In the 100 <hr/> demo, JavaScript generates inline variables for every element. That means so many unique combinations get generated.
Find the "for" loop on line 170 and you can change the number of people generated
Or check out this demo
https://codepen.io/jh3y/pen/dyXoZBV
Find the "for" loop on line 170 and you can change the number of people generated
Or check out this demo
https://codepen.io/jh3y/pen/dyXoZBV
Last but not least 
You've got more than you think
Need a transform or a rotate? Running out of room?
For most elements, you also get two elements for free!
The pseudo-elements :after and :before https://codepen.io/jh3y/pen/mdEJByN
You've got more than you think
Need a transform or a rotate? Running out of room?For most elements, you also get two elements for free!
The pseudo-elements :after and :before
https://codepen.io/jh3y/pen/mdEJByN
That's it!
A spontaneous mini-thread about drawing things in CSS with a single element
Had a few questions about the "100 Members of HR" demo and figured I'd throw something together.
The gist: Layer up background images! Layer! Layer! Layer!
A spontaneous mini-thread about drawing things in CSS with a single element
Had a few questions about the "100 Members of HR" demo and figured I'd throw something together.
The gist: Layer up background images! Layer! Layer! Layer!
Got any other tips or tricks you use?
Still not sure about how to do something?
Let me know!
Still not sure about how to do something?
Let me know!
