The snowman from the image was drawn in CSS, without using JavaScript or HTML, as you can see in the following snippet:
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>
In the snippet itself, there's nothing in the HTML or JavaScript boxes, which makes it look like there's no other code but CSS, but the code above (or something similar) is auto-generated to run.
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).
Mystery solved.
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 ::before
and ::after
pseudo-elements.
The 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 background
.
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).
With three box-shadow
s we generated the hat. And then used multiple linear-gradient
to create the arms, hands, and broom.
Et voilà ! Our snowman is complete!