Dad's Canned Jokes - June CSS Art Challenge

#frontendchallenge #devchallenge #css

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Update

This project was a winner in the Frontend Challenge - June Celebrations CSS Art Prompt.

Inspiration

We celebrate Father's Day in June and Dads are known for their jokes. I made a Dad's Joke Page landing page challenge, (Father's Day means Dad Jokes). I really wanted to do some CSS art too, so I made Dad's Canned Jokes based off a root beer can.

Demo

Journey

I used the same colors as the landing page, most the jokes are the same too. Started with a rectangle then added border-radius and box-shadow to give it the impression of depth.

The red bands on top and bottom are semi-circles and the red line on each side are borders on a transparent rectangle. They are layered on top of each other to look like they are connected.

The label is another rectangle with transform: skewY(); applied to tilt it. All the text is inside the label div, so they get tilted as well. I wanted to curve the edges back more to help on the 3d effect. But haven't figured it out yet.

The lid is a silver oval. I tried some gradient color stops to make it look shiny but it just didn't work. More box-shadow helps give depth to the back rim of can.

Thanks for the challenge, I really enjoyed it.

Build AI apps faster with Heroku.

Heroku makes it easy to build with AI, without the complexity of managing your own AI services. Access leading AI models and build faster with Managed Inference and Agents, and extend your AI with MCP.

Get Started