31 CSS Art pieces, one HTML tag — My Divtober 2022 Collection

The first 30 days of #divtober

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.

01. Badge

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.

02. Dry

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.

03. Snack

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.

04. Quiet

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

05. Stamp

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.

06. Meaty

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.

07. Wonder

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.

08. Haunted

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.

09. Rise

10. Game

A game 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.

10. Game

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.

11. Burger

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

12. Shadow

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

13. Forever

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.

04. Splash

15. Erase

Pencil erasing lines — Things start to click at about the halfway point of the month. I understood with this pencil how to more efficiently code linear gradients and, in general, how to tell a story with less complexity.

15. Erase

16. Hypnotic

I divulged heavily from my Figma concept to something that was more mathematical and achievable. This is mostly just a radial gradient, a conic gradient (my first use of that), and slight animation.

16. Hypnotic

17. Stripes

I wanted to play with appearing to bend lines (using radial gradients) to make more flowing and vibrant lines.

17. Stripes

18. Pun

Not the most complex piece to make, but one of the most fun cause I went through a lot of bad puns to find a joke to build around.

18. Pen

19. Mythical

Born in the year of the dragon, I’ve always had an affinity long before HBO started making them centerpieces for their dramas. This was the first piece I spent more time in Figma and then used the inspect tool to match exactly pixel for pixel

19. Mythical

20. Ten

This started out as the Big Ten logo with a football field behind it, but the B10 lettering looked janky, so I swapped out for yard markers to designate 10 yards til the goal.

21. Valuable

I had this diamond on hand from a Udemy class on CSS Art. It took very little effort to convert it from multiple divs to one set of 45-degree spun linear gradients.

21. Valuable

22. Soft

A feather floating down — I liked trying to get the shadow to match the direction with less movement. I still was having issues understanding the better way to do transparency here.

22. Soft

23. Pop

A pop-art comic-book style burst with CSS! jumping out. This was getting more refined with the repeating gradient and conic gradient.

23. Pop

24. Cube

This was a lesson in agility. It was supposed to be a set of dice, then just one, then when I still couldn’t get that right, it became just an empty box.

24. Cube

25. Luminous

Now getting into the home stretch, I started to build my confidence and do a few tentpole pieces that I now felt skilled enough to handle. This one here, the chase scene through The Eye from the Star Wars Andor show, was the first in them.

25. Luminous

26. Vintage

Surfer van — This is probably the one I find most polished and complete. It’s inspired by some stock art, but it’s completely recreated with CSS.

26. Vintage

27. Grain

This was going to be so much more, a whole bowl of rice, but the way it looked with one grain and chopsticks had such a photo realism I don’t usually find that I just left it at one.

27. Grain

28. Monster

For a lot of these, I didn’t know what I wanted to do til I sat down and started, but this one I knew way back when the list came out and was so thrilled my abilities grew enough over the first four weeks to be able to do a respectable job recreating this, one of my most cherished book growing up.

28. Monster

29. Free

Having a go at outlines and just a bit of ironic fun with the word free. It also cycles back to the beginning on Day Two when I tried to make cactuses.

29. Free

30. Beloved

This piece was a thank you note to my wife and family for being so supportive, as I devoted a fair amount of time this past month to make all this CSS art. It also cycles back to the beginning, as it’s the same avatar of me I used on Day One for the badge.

30. Beloved

31. Brew

This was a bit of a culmination of all that I learned about shadows, subtlety, animation, gradients, and the like pulled together into one robust, complex last set piece to end the #divtober.

31. Brew

In Summary

My favorite is 28. Monster — The Monster at the End of this Book. I am most proud of 31. Brew — The Beer Bottling. I think the one that turned out the best is 26 Vintage — the Surfer Van, and

And if I find time to go back, I want to update 24. Cube to make it the dice it was meant to be, 22 Soft to fix the transparencies, and 03. Brownies.

But beyond the results of each day’s piece, the bigger picture is I could feel the progression as each day I honed my skills a bit more and recognized better, cleaner, more refined approaches.

Also, I felt welcomed into a great community of CSS artists that I found rewarding to share our ideas with each day. A few that were very active through Divtober include:

If you are feeling inspired or are interested in CSS Art, reach out on Twitter and let me know, I have loved connecting with people who share this common passion and interest.

Thanks for looking through all the items I shared. I intend to have all of these up on a new site cssartstudio.com coming soon.

As always, all thoughts are my own and not my employer, who does not pay me to code single-div art pieces (but wouldn’t it be amazing if they did)? And yes, I did say code. I believe CSS is a coding language; I will die on this hill. Some of these pieces are inspired by other images, and credit is provided in the Codepen code.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Greg Robleto

Greg Robleto

251 Followers

Creative leader at the intersection of design, product, and tech. Writing mostly about design, CSS, product strategy, leadership, investing, and more.