This content originally appeared on DEV Community and was authored by Chris Jarvis
This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.
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. 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.
This content originally appeared on DEV Community and was authored by Chris Jarvis
Chris Jarvis | Sciencx (2025-06-28T01:18:48+00:00) Dad’s Canned Jokes – June CSS Art Challenge. Retrieved from https://www.scien.cx/2025/06/28/dads-canned-jokes-june-css-art-challenge/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.