Dad's Canned Jokes - June CSS Art Challenge

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.