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 sometimes makes things a little more complicated. (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 users will get to choose if they want animations displayed or not, and they will need to be activated individually (which is also a significant performance improvement.)
Some things can be improved (repeated link names, working on that), but I am happy with the result so far. I may 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 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/SVG?) 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, these 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 works without seeing the code?
Woman's Portrait
This is 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 out the ::after). It also uses CSS custom properties, making it super easy to change the colors and add/remove features.
Now it's your turn...
Have you ever done a drawing with CSS? And with a single HTML element? Will you join Divtober this year?
Top comments (7)
I suspect you get the question about responsiveness, even though people wouldn't likely ask the same of a png, svg, or other image format, because making a responsive image inserted into a webpage with an
<img>tag is really easy so they take for granted that is the case. Whereas what you do with css looks like magic to someone with more basic css skills, so the asker of that question is likely assuming it is far more difficult to do css art responsively than it is to insert a responsive image.You have a point. I may have focused that question from the wrong perspective and should assume good intentions. I tend to be in the defensive when sharing CSS art, because it normally gets the same criticism (mainly "this is useless, why not SVG?") I like your point of view. I need to see things from a more positive angle.
Super cool that you have the youtube videos showing the full drawing process. Did you do to screen captures while you initially drew them? Or did you recreate them afterwards from the finished product? Impressive either way, but extremely impressive art skills and css skills if those videos were single takes of the original drawing process.
The videos are screen captures as I code them. That's why I go so slow 😅
In some cases I even speak, but when I listen to it, I don't like something and just have them as time-lapses with elevator music.
This is super cool.
I've made CSS art but never in a single div. I may try something for divtober.
When presenting images on the website, one must remember about the appropriate size of the photos.