Divtober is a coding challenge that happens in October. The goal is to create CSS art with a simple (but critical) condition: only use one <div> element (or any other HTML element as long as it is only one). Hence the name: Div + October = Divtober.
Lynn Fisher organizes and promotes this event, aside from her regular Web Designer and Developer job, and has a beautiful collection of single-div CSS drawings that she showcases on her site, A Single Div.
Last year, I participated in Divtober with other web developers and had a bunch of single-element CSS drawings myself. So, I decided to put some of them on a website similar to A Single Div. The result is CSSDrawings.com.
There isn’t a single image on the page. Even the icons are pure CSS, and toggle switches (also in CSS) control the animations.
Challenges
A website about CSS and CSS art, entirely coded in CSS (and HTML, of course), can be challenging. Plus, I’m a Developer, not a Designer, which makes things a little bit more complicated at times. (To be completely honest, the layout is a clumsy copy of Lynn’s A Single Div.)
But there were other additional challenges: how to make accessible something that is inherently non-accessible like CSS art? I had some ideas about it from the past, and put them to action. The result is a perfect score on Lighthouse, and an almost perfect score on Wave (with some warnings and a false positive.)
As part of the accessibility goal, I disabled all the animations from the drawings that had one, and put them behind toggle switches, so animations will only be displayed if the user wants to see them, and they will need to be activated individually (which is also a big performance improvement.)
There are some things that can be improved (repeated link names, working on that) but I am happy with the result so far. Maybe I will add a section with the code and the drawing side by side if I have time. But overall, it is ready for Divtober’22.
Probably, the biggest challenge will have to be answering the questions that always pop up when I share something related to CSS art… Is it responsive? (Yes, do you ask that to people sharing drawings on JPEG?) Can you animate it? (Yes, but I don’t think I will if they are not already animated.) Why CSS instead of SVG? (Because.)
Favorite Drawings
There are over 90 CSS illustrations on the web page, so picking favorites is tough. Here are five of the drawings I enjoyed coding the most (in no particular order):
Stapler
A realistic illustration of a stapler coded in CSS and a single HTML element. (And there’s a version in red too!) The element is a checkbox and it is interactive: click on it and the staples holder will slide out and in.
Volume Knob
I like the shadows and the realistic look. It is also functional as it uses an <input type="range" /> as the base for the drawing. Also, the background has some metallic texture (but that’s “cheating” a little as that’s the container element and not the knob in itself.)
Animated Dice
At first glance, this dice may not look like much. It is even poorly animated (it’s glitchy on Safari, luckily most people won’t notice) and incredibly simple as a 3D drawing. So why pick this as a “favorite”? Because it is a single element. A cube has 6 sides, but with a single HTML element we only have 3 sides to work with (the element in itself and the ::before and ::after pseudo-elements). The animation is more than just a simple rotation. 😉
Magic Trick
Making this illustration fit the screen was more challenging than creating it (which was also fun). A full “magic trick” with a single HTML element and CSS, no JavaScript or anything else involved. Can you guess how it is done?
Woman’s Portrait
The only drawing in this list that is not animated or interactive. But I like it. I normally don’t get to draw women. Every time I try, I end up with something that looks like Gollum, but this was an exception (please don’t comment the ::after). It also uses CSS custom properties which make it super easy to change the colors and add/remove features.