Pocket Guide to CSS only Drawings and Animations
When I came across this Codepen that shows an amazing animation of a Star Wars AT-AT Walker that was built ENTIRELY with CSS…
I was like:
So I became a bit obsessed about how further we can push the limits of what we can draw with CSS only. Basically, I noticed that you can play around with basic shapes like circles, rectangles and triangles to draw virtually anything. You can even put some drop-shadows and CSS filters to get some pretty cool effects as well.
In this pocket guide I'll write some examples from really easy to more complex things you can do to create cool drawings and animations with CSS.
Creating basic shapes
Create a div and give it a class named "rectangle". As soon as you give it a width, height and background color you got yourself a fancy rectangle. Ta da!
Take your rectangle and give it a border-radius of 50%. Now you have a circle:
If you want a parallelogram instead, you can skew the rectangle you created:
Or you can create a trapezium, using a perspective. To do that, you have to put the rectangle inside a parent div, that has a perspective property. That basically creates a 3D space to render the elements inside the parent. So, if you rotate the rectangle in this 3D space, you get a trapezium:
If you duplicate the trapezium and rotate one of them by 180° you can make an hexagon.
Creating triangles with CSS is a bit more complicated, but I found a Codepen that explains the process really easily:
To recapitulate, I created this Codepen with all the basic shapes we talked about:
Creating pixel art with CSS
There's a technique to create pixel art using CSS that I found pretty cool. Basically, you just have to create a square div and give it a sequence of box-shadows, so that each shadow has sharp edges and different colors. As an example look at this cute pixel art of Dory:
You must be thinking that the process of creating these is pretty tedious. It is a bit tedious indeed, but once you have created a single line, you can just duplicate, move it to the right position and change the colors of each square as needed:
Or, you can use this awesome tool to paint the squares and then just export the CSS out 😅
Light it up!
If you ever had the chance to take a drawing lesson in your life, you know that one of the first exercises an instructor would ask you to do, is to draw some 3D primitive shapes, and study how the lights and shadows change on the surface:
Just by adding a couple of inset box-shadows on the div, you can simulate the highlight, midtone, core shadow and reflected lights mentioned above. For the cast shadow you can create a pseudo element before with an empty content property, so you don't have to create extra divs. You can make the edges of the cast shadow smoother by playing around with the box-shadow and the blur filter values.
Using this technique you can give a three-deeish appearance to any kind of drawing. Like this pure CSS rocket bellow:
Let's animate it all
As I have explained on Alien Invasions, SVGs and CSS Animations, creating a CSS animation is really easy. You just have to give it a name and a sequence of steps, changing some CSS property on each step:
To further explore the uses of shadows take a look at this floating ghost below:
Notice how a simple animation that changes the size of the ghost shadow on the floor and it's position to follow the ghost a bit to the side when he moves, makes the whole composition more interesting. Try erasing the .ghost__shadow div to compare. The shadow creates the illusion that the ghost is actually in a 3D environment.
Now let's take the rocket from a previous example and make it fly:
There are a bunch of interesting things going on on this example, so let's split it into smaller pieces:
1. Background Stars
The stars moving on the background are a big part of what makes us feel like the rocket is actually moving forward. If you are using something like Pug you can create an each loop, that creates several <li></li> elements. Each li will be a star:
We can set an animation named stars to every li inside the element that has an stars class. This animation will basically use the transform property to translate horizontally the element across the screen.
Also, we can give it a small width and height, and apply a border-radius to make it round. Lastly, we can apply a white box-shadow to make the stars glow a bit.
Now we have 130 bright stars on top of each other. To space them out, we can use a really useful sass function to generate a random number for the top and left properties. You just have to put the maximum number between the parenthesis and put the measure unit you want after it. On this example, we're using pixels.
So, in order to generate random numbers for each star, we can use the :nth-of-type() selector inside an for loop.
We can use the same loop to alter the animation-delay and animation-duration of each star. This way, we'll have stars passing by at a different speeds, giving us the perception that some of the stars are farther from us than others:
You can use this same technique to create rain or snow like I did on this cute Sloth and Pickles Christmas Card.
2. Rocket movement animation
For the rocket itself, we can create an animation named "fly". We can use this animation to translate the rocket on the X and Y axis. Changing the scale of it, is also a good idea as it seems that the rocket is moving farther from us and getting close again.
3. Flames animation
For the flames drawing, it should be enough to have another list element, where each li is a "flame". We can use border-radius: 50% 0 to give each flame a lemon shape. On this example, I've used just 4 flames, and each flame has a different color: red, orange, yellow and white.
The animation of the flames, basically makes each flame rotate, translate and scale a bit. I've also played around with the opacity to create a flicker animation.
This makes all the flames move exactly the same way. To make it more interesting, we can use another for loop that changes the animation-delay and animation-duration of each flame.
4. Lights reflected on the rocket
Take a look at this cozy fireplace gif.
The same way the walls and the floor of the fireplace reflect the light from the fire, we can create an animation for the flames reflected on the rocket surface:
We can apply this animation to the rocket body, so it looks like it's reflecting the light from the flames.
That's all folks!
If you like what you read, make sure to ❤️ it bellow. Feel free to comment and let me know if you think I could improve this article somehow.
Would you like to know a little more about how we create great digital products and change people’s lives? Visit our website!
