DEV Community: Greg Robleto

Pure CSS Art, one HTML tag - My Divtober 2023 collection

Greg Robleto — Tue, 31 Oct 2023 11:14:23 +0000

Divtober 2023 : Greg Robleto's CSS Art Collection

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

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

30. Choco Taco

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

29. Walking to Lunch

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

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

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

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

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

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"

23. Fake Quotes

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

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 as a "Codepen pick"

21. Set Sail at Night

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

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

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

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

An animated monochrome of the Charging Bull and Fearless Girl statues as seen their positions on Wall Street from 2017–2018 (before each was moved to a separate location).

Code on Codepen: https://codepen.io/robleto/pen/OJrqaOd

16. Tangled

For Tangled I wanted to connect to the Disney movie. I was inspired by a piece of artwork, and made an exercise in recreating it to explore layering and attempt animation both of the lanterns and the hair. (Inspired by art by artist Olga Nazarova)

Code on Codepen: https://codepen.io/robleto/pen/RwEvZRN

15. Memory Game

The classic game of Memory (with cards displaying a Fall theme), but the limitations of a single div with only two psuedo-classes limited my ability to show only one round of the game.

Code on Codepen: https://codepen.io/robleto/pen/wvRNevZ

14. Delaware

Nearly the smallest of all the states is my home state of Delaware. Depicted here in a frame to punctuate the small scale of the state that uses the slogan "Small Wonder". (Frame inspired by coder Chris Smith)

Code on Codepen: https://codepen.io/robleto/pen/eYbxBwZ

13. Piggy Bank

Sure, it doesn't have the best interest rate (or any interest rate); otherwise, a piggy bank is the perfect place to collect all your coins. The biggest challenge with this piece was making the coin slot look proportionally realistic and be large enough for the animated coin to "fit though".

Code on Codepen: https://codepen.io/robleto/pen/gOZqbeg

12. Whiskey Neat

A glass of whiskey… neat (cause the ice cubes were going to be too much extra work). The key to this piece was really scrutinizing what color combinations come together to provide the effect of semi-transparency.

Code on Codepen: https://codepen.io/robleto/pen/zYyyMGz

11. Pirates

The hack I found with this one was copy/pasting the whole bones section into a pseudo class and reducing it's scale so the logo on the hat matched exactly.

Code on Codepen: https://codepen.io/robleto/pen/PoXXjgN

10. Sparkler

Once the sun sets on the Fourth of July, the neighbors gather out front, and each of the children are given sparklers that look a bit like this when they are lighted. At first I tried to recreate a multi-div sparkler pen into just a single div, but it proved too onerous. (Inspired by a pen by johnnyfekete)

Code on Codepen: https://codepen.io/robleto/pen/poqqwqW

9. Lightspeed

The prompt was space and of course I was going to include at least one Star Wars themed piece in this collection. I really like how the overlapping conic gradient make a streaking background that provides that lightspeed look.

Code on Codepen: https://codepen.io/robleto/pen/abPQMKR

8. Spider-men Meme

Those Spider-men are all mixed up. This was a step up in my growth as a CSS artist. I had no idea how to make this when I started and it could use a lot more refinement, but this piece really helped me see how I can craft even complex illustrations using just the basic shapes available in single-div art: primarily ellipses, rectangles, and triangles.

Code on Codepen: https://codepen.io/robleto/pen/bGOmVeq

7. S'mores

Mmmmm, S'mores! Knowing this was going to be a relatively basic piece, I strove for polish, I wanted every element to fit exactly I went with a Kawaii style, because it's a favorite of my daughters, and it works so well for creating CSS art.

Code on Codepen: https://codepen.io/robleto/pen/XWoPqoN

6. Bouncing Ball

Easing and cubic-beziers are not my forte, so for this piece, I actually leaned on prompting ChatGPT to show me examples until I could figure out how to set up the keyframes to make this little blue ball bounce correctly.

Code on Codepen: https://codepen.io/robleto/pen/ZEVMJNp

5. Not Penny's Boat

This is a deep cut specifically for fans of the show LOST. It was one of my favorites. It was so good until it wasn't. If you didn't watch it, then - spoiler -this is from a pivotal season finale moment. I burnt many cycles trying to make a Dharma logo with no success and pivoted to this much more complex idea last minute. It was an afterthought, but adding the lines into the hand was a necessary addition.

Code on Codepen: https://codepen.io/robleto/pen/JjwaYVX

4. Stock Ticker Crawl

I wanted to pay homage to the old news crawls on the sides of media buildings when visiting New York City. This piece has already undergone three revisions since debuting on the 4th. First it was only an animated ticker, then it was a static ticker on a 3D building, and now it's an animated ticker on a 3D building.

Code on Codepen: https://codepen.io/robleto/pen/VwqBqPy

3. Mondrian

This Piet Mondrian print is framed and hanging just above the piano in my home. I repurposed it for Divtober, I had actually coded it in 2021, one of my best early attempts at CSS art and then refactored to single-div CSS art.

Code on Codepen: https://codepen.io/robleto/pen/OJxKZjE

2. Penrose Triangle

The Penrose Triangle is an impossible shape that I first became fascinated by seeing it and similiar elements in the art of M. C. Escher. I was still shaking off the rust at this point, trying to just get angles to cleanly line up adjacent to each other.

Code on Codepen: https://codepen.io/robleto/pen/BavPGGx

1. Pumpkin Spice Latte

Where it began for 2023, and I admit I felt so rusty, I had to watch and follow along with an online tutorial just to reacclimate myself with the fundamentals of using background gradients to make shapes and faux shading. (Inspired by a tutorial by Coding Artist)

Code on Codepen: https://codepen.io/robleto/pen/BavPqPL

In Summary

I am most proud of 31. Witch and 28. Origami for how polished they turned out considering how challenging the concept was (1. Pumpkin Spice Latte, 2. Penrose Triangle and 7. S'mores also turned out very polished, but those were earlier and less ambitious endeavors).

And when I get the chance I want to go back and improve the hand on 5. Not Pennys Boat, the sparkling on 11. Sparkler and just add something more to 10. Pirates **_as I was able to do to improve _4. Stock Ticker Crawl**.

It was a journey this October, from being barely able to remember the fundamentals and needing a crash course for the first piece, to being able to manage the complexity in the latter pieces.

Also, I felt reconnected to a community of CSS artists. I found it rewarding to share our ideas with each other 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, Mastodon or CodePen and let me know, I have loved connecting with people who share this common passion and interest.

Please visit my site for the best of my CSS Art: cssartstudio.com

Disclaimer: 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 that be cool, one can dream)? Some of these pieces are inspired by vector stock, art or other pens; credit for the inspiration is provided above and in the Codepen code. Every line of code creating the art work was coded by hand by Greg Robleto.

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

Greg Robleto — Tue, 01 Nov 2022 03:30:12 +0000

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.

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.

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.

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 a touch of animation just to give it a bit of life.

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

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.

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

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.

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.

Code on Codepen: https://codepen.io/robleto/pen/dyegoLK
Time-lapse video on YouTube: https://youtu.be/Ak6DSrM8AJw

–-

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.

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.

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

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

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.

Code on Codepen: https://codepen.io/robleto/pres/rNvoRaV
Time-lapse video on YouTube: https://youtu.be/s4rlX2cja-w

–-

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.

Code on Codepen: https://codepen.io/robleto/pres/rNvoRaV
Time-lapse video on YouTube: https://youtu.be/jcclDHxD2qc

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/xxjMxop
Time-lapse video on YouTube: https://youtu.be/h0hR6de16E4

–-

17. Stripes

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

Code on Codepen: https://codepen.io/robleto/pres/xxjBYQv
Time-lapse video on YouTube: https://youtu.be/_Dvruv81wSQ

–-

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.

Code on Codepen: https://codepen.io/robleto/pres/xxjBMqm
Time-lapse video on YouTube: https://youtu.be/zZ5FvOXoe2k

–-

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

Code on Codepen: https://codepen.io/robleto/pen/NWMmWRM
Time-lapse video on YouTube: https://youtu.be/nzjcaZGLxeM

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/xxjewqG
Time-lapse video on YouTube: https://youtu.be/uS8icMR8qlk

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/gOzyPpd
Time-lapse video on YouTube: https://youtu.be/deye0rauCR8

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/KKRjVmY
Time-lapse video on YouTube: https://youtu.be/87U3QUR7BrQ

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/qBYeYxb
Time-lapse video on YouTube: https://youtu.be/ka0GmvIIqig

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/LYmwmox
Time-lapse video on YouTube: https://youtu.be/GFHY5SCcOBk

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/dyKbpYy
Time-lapse video on YouTube: https://youtu.be/PN0gvUyeNUQ

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/wvXwqjp
Time-lapse video on YouTube: https://youtu.be/yXp0_k97iqU

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/mdKyeoY
Time-lapse video on YouTube: https://youtu.be/C697rCRzlFo

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/NWzPbwB
Time-lapse video on YouTube: https://youtu.be/ikGPTW6R1vI

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/gOKpbGb
Time-lapse video on YouTube: https://youtu.be/zN6dUwvZG3A

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/BaVNjxK
Time-lapse video on YouTube: https://youtu.be/rLzWckO9itU

–-

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.

Code on Codepen: https://codepen.io/robleto/pen/abKOmqj
Time-lapse video on YouTube: https://youtu.be/vKYZphTizLE

–-

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.