Coming in very rusty and concerned for being able to commit the time, I nonetheless started participating again in the Divtober challenge. Created and organized by Lynn Fisher, the challenge is to make CSS artwork based on a one-word daily prompt. The twist is that while you can use as much CSS as you need, you only get one hook in the HTML. One. single. div.
I did successfully post a piece every day. Here is my collection (in reverse chronological order).
31. Witch
Press enter or click to view image in full size
Divtober 2023 : Day 31: Prompt “witchy”
This was the culmination of a month of practice. It was exceedingly more challenging than I would have endeavored at the beginning of the month, which is a testament to the confidence and craft one builds through practice. Nailing the animated hat tip really made this one of my favorites.
- Code on Codepen: https://codepen.io/robleto/pen/jOdbvoY
- 🏆 Selected as a “Codepen pick”
30. Choco Taco
Press enter or click to view image in full size
Divtober 2023 : Day 30: Prompt “discontinued”
I googled for what’s been recently discontinued and was saddened to see the Choco Taco. Such a weird treat — mass produced ice cream in a frozen taco. I don’t know why I like it so much, but it was one of my favorites growing up. I added some kawaii facial elements to get the taco itself expressing it’s discontent being discontinued.
- Code on Codepen: https://codepen.io/robleto/pen/jOdbKoJ
- 🏆 Selected as a “Codepen pick”
29. Walking to Lunch
Press enter or click to view image in full size
Divtober 2023 : Day 29 : Prompt “pin”
I dedicated this one to my friend and (now former) colleague, Swetha. In the pre-COVID before times when we working together in the office, it was Swetha who always led the lunch train from HQ to the PTO Cafeteria. This is a (fairly accurate) map of the Carlyle section of Alexandria, Virginia and the route we would take. I don’t think that cafeteria is actually there anymore, and Swetha has left the company, but this Divtober piece is a reminder of those good times.
- Code on Codepen: https://codepen.io/robleto/pen/abXONPp
28. Origami
Press enter or click to view image in full size
Divtober 2023 : Day 28 : Prompt “handmade”
I had this idea that the shapes of folding paper for origami would itself so well to the art of coding with CSS, especially when only using a single div. For a while I didn’t have a prompt that it fit until “handmade”. It wasn’t until I was nearly done that I had the idea to replicate the last step with new styling to show what the completed origami piece would look like
- Code on Codepen: https://codepen.io/robleto/pen/poGvWEX
27. The Golden Rule
Press enter or click to view image in full size
Divtober 2023 : Day 27 : Prompt “rules”
The show Fall of the House of Usher (which was so good!) referenced this classic comic panel from the Wizard of Id. While cynical it does ring very true. The hardest part about trying to recreate a comic panel getting a thin black stroke around everything. This one was really rewarding when finished and seeing just how much can be done with CSS.
- Code on Codepen: https://codepen.io/robleto/pen/qBgEaGN
- 🏆 Selected as a “Codepen pick”
26. Ice Bucket Challenge
Press enter or click to view image in full size
Divtober 2023 : Day 26 : Prompt “cold”
In 2014, things were going so well we had to manufacture high-anxiety situations. That summer the viral trend was to fill up a contractor size bucket with ice water and voluntarily chose to dump it over your own head.
(Inspired by vector stock by artist 588ku)
- Code on Codepen: https://codepen.io/robleto/pen/bGzGxMK
- 🏆 Selected as a “Codepen pick”
25. Cheesy Pick-up Line
Press enter or click to view image in full size
Divtober 2023 : Day 25 : Prompt “cheesy”
Nothing quite as cheesy as a bad pick-up line. After so many failed attempts to make animating the plane look right, I realized I could instead animate the clouds.
- Code on Codepen: https://codepen.io/robleto/pen/GRzKGda
24. Loaves and Fishes
Press enter or click to view image in full size
Divtober 2023 : Day 24 : Prompt “feast”
A feast for thousands can be prepared with just a few of these. I loved after so many complex Divtober pieces how this iconic image took barely 100 lines of code. (Inspired by vector stock by T. Barbarousse)
- Code on Codepen: https://codepen.io/robleto/pen/zYeOwyW
- 🏆 Selected as a “Codepen Pick”
- 🏆 Listed on Dribbble as “Popular CSS Art”
23. Fake Quotes
Press enter or click to view image in full size
Divtober 2023 : Day 23 : Prompt “fake”
Honest Abe is right. You can’t always trust the legitimacy of what you read online. 😄. For this one I googled around to find a good quote and then explored vector art for ways to portray Lincoln. (Inspired by vector stock by vexels)
- Code on Codepen: https://codepen.io/robleto/pen/NWeQEzy
- 🏆 Selected as a “Codepen pick”
22. Frankie
Press enter or click to view image in full size
Divtober 2023 : Day 22 : Prompt “alive”
This little guy, Frankie, was just fun to make; putting uts a twist on that scary Frankenstein monster by making it youthful and cute. Frankie was a real confidence booster. After three weeks of making CSS Art, it was noteworthy to me how straight-forward I found putting this one together (other than the bolts, those were vexing). I was starting to internalize the fundamentals of working with linear and radial gradients.
- Code on Codepen: https://codepen.io/robleto/pen/oNJKERR
- 🏆 Selected on Codepen as a “Codepen pick”
- 🏆 Listed on Dribbble as “New and Noteworthy CSS Art”
21. Set Sail at Night
Press enter or click to view image in full size
Divtober 2023 : Day 21 : Prompt “faraway”
I liked the concept of a ship asail far off at sea. I wish I could have made it less generic, matching a real event perhaps. With this one, I realized I could scale up to 2x to build intricacies like the ship details, and then reduce to 0.15x to deliver that faraway result.
- Code on Codepen: https://codepen.io/robleto/pen/XWovpNO
20. Eye Exam
Press enter or click to view image in full size
Divtober 2023 : Day 20 : Prompt “seeing”
Trying out with the transform blur tool on this one. The limitation of text available in single-div art led to using the shapes eye exam instead. If you can’t see how this piece represents the prompt, “seeing,” well, then you might need glasses. :)
- Code on Codepen: https://codepen.io/robleto/pen/BavXaKZ
19. Scrum Board
Press enter or click to view image in full size
Divtober 2023 : Day 19 : Prompt “sticky”
Before it all went digital with Trello and then Jira, the daily morning Scrum looked like this, a whole lot of sticky notes being moved across on a white-board. (Inspired by vector stock by artist microone)
- Code on Codepen: https://codepen.io/robleto/pen/jOXjRyg
- 🏆 Selected as a “Codepen pick”
18. RGB Cables
Press enter or click to view image in full size
Divtober 2023 : Day 18 : Prompt “component”
It shows my age a bit that I know that these outdated RGB plugs are called Video Component cables (the prompt was “component”). The challenge here was making all three items look mostly identical despite being coded separates on along three different angles.
- Code on Codepen: https://codepen.io/robleto/pen/QWzRgLB
- 🏆 Selected as a “Codepen pick”
17. Fearless Girl and Charging Bull
Press enter or click to view image in full size