Copied to Clipboard
(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.
Blue soda can on yellow background
Thanks for the challenge, I really enjoyed it.