Lynn Fisher is an amazing CSS Artist, and she is especially great at creating CSS drawings using just a single HTML element among many other projects she does (Nestflix is a lot of fun!)
In October, she organized #divtober, a one-month challenge in which she drew (and encouraged others to participate too) CSS art based on different topics. The condition: use just one HTML element. This was the list for this year:
In the past, I have done CSS art, but with multiple elements, so I decided to join the challenge and draw with CSS using a single HTML element for a change. Here are the drawings I did:
This 3D-looking fan is interactive: pull the string to make it work.
An animated explanation of how a
for loop works (I know, it's not a drawing per se, but it is interesting)
I recorded the process for this one and shared it on Youtube. Later, I'd do the same with other drawings.
Homonyms are words that are written the same but have different meanings. So I drew a paper boat sinking in a bathroom sink.
A 1920s member of the organized crime. I like this drawing, but it's an example of something that would be 1,000 times better and easier using SVG.
I removed the demo from this day because it has autoplay audio and it can be a bit annoying. You can see it live on this link
...And the video of how it was done:
This cartoon was based on a previous cartoon I had done (using multiple elements). Here's the video of how it was done:
I did to entries for snow. One was an abominable snowman...
...and the other one was a snowfall animation using a single element (beware, your computer fans may start overworking with it).
This and the following day, I didn't have many ideas and went for easy drawings.
What's more nostalgic than a cassette with music recorded directly from the radio?
...and the video of how it was done.
This was a weird one. I tried to do a The Wizard of Oz homage but ended up with something too abstract and simplistic.
A magic trick with CSS and a single HTML element. Will the Great Wizard Al guess your card and remove it from the deck?
And how this bunny(?) was drawn:
I tried to go with a realistic drawing this time. Something "easy": a volume knob that goes up to 11.
Silly/childish me decided to code a demo combining #23 (loud) and #24 (smelly) using
Another realistic attempt: a bottle of spices. This may take a second to load:
...and how it was done:
There's a second version of this that only works on Chrome, and I personally like it better.
Another day in which I did two drawings. First I tried doing a still nature:
...but I didn't like how it was going, so I drew a cute watermelon, and shared the process on Youtube.
Halloween Day and the word was "spooky", I tried different things, as I wasn't convinced by them:
The word spooky replacing the O's with a skull and a ghost:
A ghost (and how it was done):
And finally a Frankenstein's Monster with CSS and a single HTML element:
...with video too:
It was fun completing the challenge and trying different things with CSS and the background gradients. I learned some new things, found some differences between browsers, and enjoyed seeing what other people did (check the #divtober tag on Twitter).
But it's time to take a break. These challenges are more time-consuming and draining than what they look like. I will make more CSS art in the future but, for now, it will have more than a single HTML element.