Have you heard of cssBattle? 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:
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 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.
Let's try it.
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.
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 from css drawing:
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:
Then I added the vertical ones:
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.
Here is another example that I use the exact same technique to create the drawing (challenge No.66), but in this case you have to focus on the negative space:
Let's take another two examples to see how to create shapes with css background property
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:
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.
Top comments (1)
Amazing, Lucas!
Some comments may only be visible to logged-in visitors. Sign in to view all comments.