For the past few years, I have watched from the sidelines as amazing CSS art is posted every day of the month of October as part of a challenge called #divtober.
The challenge created and organized by Lynn Fisher is to use a one-word prompt daily to make a piece of art with as much CSS as you like but only one hook in the HTML. One. single. div.
Being on sabbatical this Fall, I felt like I could devote the time necessary to participate and sharpen up my CSS skills and flush out a new hobby.
I did successfully post a piece every day. Here is my collection:
01. Badge
A conference badge — I felt like a newbie attending a month-long conference with many incredible CSS artists I wanted to learn from.
Press enter or click to view image in full size
- Badge
- Code on Codepen: https://codepen.io/robleto/pres/gOzoyJM
- Time-lapse video on YouTube: https://youtu.be/XSkVSjxbkAA
02. Dry
The desert at sunset — this was very ambitious and took a lot of time assembling and relearning CSS animation to make a sunset. I found the layers of the sky gradient so complex I wrote a whole other article about it.
Press enter or click to view image in full size
- Dry
- Code on Codepen: https://codepen.io/robleto/pres/BaxYwwd
- Time-lapse video on YouTube: https://youtu.be/xylb7FpKgkE
03. Snack
Brownies— I think this was the weakest one as I sunk a lot of time in because I didn’t yet have a grasp on the way to make angular shapes or use perspective.
Press enter or click to view image in full size
- Snack
- Code on Codepen: https://codepen.io/robleto/pen/VwxxQyJ
- Time-lapse video on YouTube: https://youtu.be/Z-p4tKRgKWk
04. Quiet
A no trumpeting sign — Trying to simplify after Days 2 and 3, and added in just a touch of animation just to give it a bit of life.
Press enter or click to view image in full size
- Quiet
- Code on CodePen: https://codepen.io/robleto/pres/eYrrvBZ
- Time-lapse video on YouTube: https://youtu.be/c9RW1PzTtXQ
05. Stamp
A passport stamp — This entry is personal as I am taking the family on the first international trip in years and am really excited to get this
Press enter or click to view image in full size
- Stamp
- Code on Codepen: https://codepen.io/robleto/pres/BaxPyxq
- Time-lapse video on YouTube: https://youtu.be/vPW7UJc8dig
06. Meaty
A butcher shop — This piece was based on stock art I found, but no matter, it was where I started to really feel confident that I was sharpening my skills and ability to build something that will come out well.
Press enter or click to view image in full size
- Meaty
- Code on Codepen: https://codepen.io/robleto/pres/vYjaGwq
- Time-lapse video on YouTube: https://youtu.be/4gwGGbgoK_4
07 — Wonder
The Library of Alexandria — One of the Seven Wonders of the World. I realized this is the lighthouse at Alexandria, not the library. Oops. I was over my skis here, but I really like how the sky and stars came out.
Press enter or click to view image in full size
- Wonder
- Code on Codepen: https://codepen.io/robleto/pen/YzLjYvr
- Time-lapse video on YouTube: https://youtu.be/pWvtimh4y_A
08. Haunted
A cute ghost — This piece was already in my Codepen files as multiple divs, so I gave it a clean up and edited it down to one div.
Press enter or click to view image in full size
- Haunted
- Code on Codepen: https://codepen.io/robleto/pen/oNdPYyd
- Time-lapse video on YouTube: https://youtu.be/f7xiC6Iv_rM
09. Rise
A skyscraper from the ground — This concept has to scale way back cause I could not wrangle perspectives as I had hoped yet, but I was happy with the aesthetic and the angle.
Press enter or click to view image in full size
- Rise
- Code on Codepen: https://codepen.io/robleto/pen/dyegoLK
- Time-lapse video on YouTube: https://youtu.be/Ak6DSrM8AJw
10. Game
Agame console controller — After a number of complex pieces, this was a relatively simple one to catch up. I realize it doesn’t actually match any particular game system.
Press enter or click to view image in full size
- Game
- Code on Codepen: https://codepen.io/robleto/pen/ZEoqxqv
- Time-lapse video on YouTube: https://youtu.be/88fKEUnMgNs
11. Burger
Grill’s On! — The grill bars were my first exploration into repeating gradients, and the burgers reinforced the use of very structured variables (since you can’t use mixins within a background tag.
Press enter or click to view image in full size
- Burger
- Code on Codepen: https://codepen.io/robleto/pres/JjvmLme
- Time-lapse video on YouTube: https://youtu.be/E798cZrYBQ0
12. Shadow
Sunset’s shadow on the wall — Through the blinds on the opposite wall, you see the light move as the sun goes down. This was surprisingly little code but a lot of forethought and concurrent animations
Press enter or click to view image in full size
- Shadow
- Code on Codepen: https://codepen.io/robleto/pen/mdLzxQd
- Time-lapse video on YouTube: https://youtu.be/8Ps5XXnb1x4
13. Forever
A racecar on an infinite track — I sunk a ton of time into figuring out the math for animating that cute car around the track. I never got it where I wanted it, it still does a bit of a clunky drift, but that’s pretty good considering how out of my depth I was going in
Press enter or click to view image in full size
- Forever
- Code on Codepen: https://codepen.io/robleto/pres/LYmgdXq
- Time-lapse video on YouTube: https://youtu.be/j2_0uhsJpEY
14. Splash
The movie Splash in a VCR — After so much time on Forever, I didn’t have the energy to figure out water droplets, so I went with something boxy that I knew I could pull off now with relative ease. I enjoyed being so different than any other submissions this day.
Press enter or click to view image in full size
- Splash