And here you can see a video of the drawing being coded step by step just using CSS (explanation of how it was done at the end of this post):
But what type of witchcraft is this? How is it possible?
Obviously, there's a trick. Codepen and other online editors, don't show the basic structure of the document that the user is editing. The written HTML code is then wrapped in something like this:
<!doctype html> <html> <head> <title></title> <link rel="stylesheet" href="link.to.css.code.from.editor" /> <script src="link.to.js.code.from.editor"></script> </head> <body> <!-- Here goes the HTML from the editor --> </body> </html>
Because it looks like there's no HTML, some people call this type of CSS drawings a zero-element or no-div drawing... but truly there is an element: the
<body> (or the
<html> in the case of the snowman).
How it was done
As it can be seen in the video above, we used 3 elements for this drawing: the
<html> tag, and its
html tag was used to generate the snowy background (we even added a small animation). It is all a bunch of different sized circles generated with
radial-gradient, and positioned all over the place using the diverse properties of
For the body of the snowman, we used the
body::before. We made it into a circle using
border-radius: 50% that will be the left eye. Then used
box-shadow to create more circles of different sizes:
- the other eye,
- the nose,
- the head,
- the buttons in the middle section,
- the middle section,
- the bottom section,
- some shadows between the different parts.
For one of the buttons, we used two circles so it would not look exactly like a circle. This was on purpose to break a little bit the symmetry of the cartoon.
For the shadows between the different sections of our snowman, we added
box-shadows with a little bit of a blur.
Finally, with the
body::after we made a transparent rectangle that covered the whole snowman. And tilted it a little bit (again, to break the symmetry).
box-shadows we generated the hat. And then used multiple
linear-gradient to create the arms, hands, and broom.
Et voilà ! Our snowman is complete!