CSS Drawing Tips
Tags: css, cssdrawing, cssbattle
Published: 2021-11-18 09:51:33

Have you heard of [cssBattle](https://cssbattle.dev/)? It's a website that provides some simple shape drawings, where  the user should use minimal  css code to recreate it. Recently  I have completed all 80 drawings, and I think I can share some css drawing techniques here. Learning these techniques may not be very helpful for your daily coding work life, but you may at least find some fun in css.

First things first, here are some techniques that I often used during these 80 challenges:
- [background](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
- [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
- [border-radius](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius)
- [box-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow)
- [drop-shadow](https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow())
- [clip-path](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) 
- [-webkit-box-reflect](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect)

When I open a new challenge, before starting to write any css, first of all I analyse the original drawing, let's take this [challenge No.52](https://cssbattle.dev/play/52) as an example. As I am looking at this, I can tell that there are only two shapes in this drawing, which is a circle and a rectangle, I am then thinking that do these shapes have the same angle and equal proportion, because we can only increase or decrease the size by using box-shadow and we can't change the box-shadow’s angle individually. And yes, the circle's angle doesn't really matter, and all the rectangles have the same angle and the same size. So in this case I can easily use box-shadow to recreate the shapes.
![No.52 challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/94sys880jcohmitobwj9.png)

Let's try it.

{% codepen https://codepen.io/lucas1004jx/pen/WNEJyxe %}

From the code example above, you can see that I only use one div to create all the circles using the css `box-shadow` property. And for the rectangle we can do the same, first we create a rectangle as our base, from which we recreate the other rectangles using box-shadow. 

{% codepen https://codepen.io/lucas1004jx/pen/qBXYKxY %}

And that's it, we have completed our challenge. I use pseudo class `:before` here just because I don't want to write another `div` tag in the html, but you can use another html tag to create the rectangle.

Let's see another example using `box-shadow` and `-webkit-box-reflect` to help us save writing more code. 

This is [challenge No.45](https://cssbattle.dev/play/45) from css drawing:
![No.45 challenge](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7m9xe2ijc34q6ckqdyx7.png)

The same as the previous example, as I am looking at this drawing, I can tell that it's formed by some rectangles. But because they have two different angles, vertical and horizontal, I have to use two shapes to create them. And also the left and right side is symmetrical, so I only need to create half the drawing, then use `-webkit-box-reflect` property to create the other half. So first I created the horizontal ones using box-shadow: 

{% codepen https://codepen.io/lucas1004jx/pen/YzxLjKb %}

Then I added the vertical ones:

{% codepen https://codepen.io/lucas1004jx/pen/dyzejKy %}

And you can see that half of the drawing is done, now I only need to add 
```
-webkit-box-reflect:right -20px
``` 
Voilà, the challenge is done.

{% codepen https://codepen.io/lucas1004jx/pen/oNedmzE %} 

Here is another example that I use the exact same technique to create the drawing ([challenge No.66](https://cssbattle.dev/play/66)), but in this case you have to focus on the negative space:

{% codepen https://codepen.io/lucas1004jx/pen/eYErxGg %}
 
Let's take another two examples to see how to create shapes with css `background` property

[Challenge No.6](https://cssbattle.dev/play/6)

{% codepen https://codepen.io/lucas1004jx/pen/vYJjbRQ %}

[Challenge No.30](https://cssbattle.dev/play/30)

{% codepen https://codepen.io/lucas1004jx/pen/WNEyvBw %}

As you can see, css `background` is a really powerful tool, it can create circles and rectangles at the same time and with different sizes. The only gotcha that we should keep in mind when we use background is that the background property is specified as one or more background layers, separated by commas. And the following layer will be positioned below the previous layer.

So in challenge No.6 I first drew the background with a transparent circle in it, then I drew the color wheel in the second layer, so we can see the `conic-gradient` as a circle in the center. If you mess up with the background layer, you will probably only see the conic-gradient layer take the whole screen, but not the background color nor the circle shape.

Here is another example that I used background layer to complete the challenge:

[Challenge No.33](https://cssbattle.dev/play/33)

{% codepen https://codepen.io/lucas1004jx/pen/yLoEYpp %}
 
So `box-shadow` and `background` are the two most useful properties that I find to help me create the drawings during the challenge. As for the other properties, they are straightforward to use, so I won't explain them with more details here.