Inktober is a drawing challenge that runs throughout October. It's based on a list of daily prompts, and participants create drawings inspired by each one.
There used to be a similar challenge for CSS art called Divtober, where artists made creations using just a single HTML element (a <div>) and some CSS. In the spirit of Divtober, I decided to join the fun and make some single-div CSS art inspired by Saturday's Inktober prompt. I won't be joining the whole thing though.
The prompt was "Sting," so I went with the obvious choice: a bee! I decided to give it a kawaii vibe: big head, round eyes, and all-around cuteness.
The cartoon is made up of three parts:
- The element itself: acts as the canvas and holds the background details like the wings, antennae, stinger, and limbs.
-
The
::beforepseudo-element: used for the body and one of the arms. -
The
::afterpseudo-element: sits on top of everything else. In this case, it includes the head and face.
Since this is a single-element drawing, the main property to work with is the background, using different types of gradients to create shapes:
- Lines with
linear-gradient - Circles, ellipses, and arcs with
radial-gradient - Triangles and trapezoids with
conic-gradient
But that's not the only property to use! The bee's body and head also need shape. For that, border-radius does the trick (use different values for horizontal and vertical!). I'll admit, there was a fair bit of trial and error before I got it looking the way I wanted... and it's still not perfect.
There are a few other properties at play too. I used an inset box-shadow to add some light and shadow to the head. And position matters as well, even if it's only applied to the pseudo-elements.
It was really fun to get back to some creative coding and CSS drawing after a while. I love how much you can achieve with gradients, pseudo-elements, and a little creativity... even using just a single HTML element!
You can check out the source code and live demo on CodePen:
And here's a video of the coding process! The whole thing took about 40 minutes, but I sped it up to just 6.
Top comments (0)