DEV Community

Cover image for My Divtober 2022 – 31 CSS art pieces, one single div
Greg Robleto
Greg Robleto

Posted on • Edited on

My Divtober 2022 – 31 CSS art pieces, one single div

#css #scss #design #codepen

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.

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

Desert landscape at sunset

–-

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.

Plate of brownies

–-

04. Quiet

A no trumpeting sign — Trying to simplify after Days 2 and 3. And added in a touch of animation just to give it a bit of life.

No loud music sign

–-

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

Passport 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.

A butcher shop

–-

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 think I was over my skis here, but really like how the sky and stars came out.

The Library of Alexandria

–-

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.

A cute ghost

–-

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.

Tall building

–-

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.

Gaming console

–-

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.

Burgers on the grill

–-

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

Shadow on the opposite wall

–-

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

Race car on infinite track

–-

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.

Splash tape in a VCR

–-

15. Erase

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

Pencil erasing lines

–-

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.

Hypnotic trance imaging

–-

17. Stripes

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

Rainbow 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.

Funny pun about cameras

–-

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

Dragon

–-

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.

Football field

–-

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.

Diamond

–-

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.

Soft feather

–-

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.

Pop CSS

–-

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.

Yellow box

–-

25. Luminous

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

Andor fleeing in The Eye

–-

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.

Surfer VW Bus

–-

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.

Single grain of rice in chopsticks

–-

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.

The Monster at the End of this Book

–-

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.

Free hugs cactus

–-

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.

Carrying a heart

–-

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.

Brewery bottling

–-

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.

Top comments (0)

Read next

hosseinyazdi profile image

10 Insane Web Design Tools Every Developer Should Know About! 🌟 🔥

Hossein Yazdi -

adam profile image

🚀 12 Dev Tools + Gen Z UX Secrets + CSS Animations (5-min read)

Adam Marsden -

jayaprasanna_roddam profile image

System design: Designing an Online Book Reader System(Like Kindle)

Jayaprasanna Roddam -

uniquereplica profile image

Software Design: What went wrong?

Steven Read -