Day 3: An Infinitely Tall Fridge
Notes from Day 3 at the Recurse Center: a very short update from the toy refrigerator poetry forum website in progress. The design idea that finally landed — put everything on an image of a fridge.
Stock image in hand, the immediate problem was obvious: the entire website didn’t fit on the fridge image. The solution was a fridge as tall as needed — not technically “infinite,” but “a fridge that is as big as required” lacks the same ring.
Here’s the infinite fridge
The HTML/CSS recipe is simple and pleasing: three images total — the fridge top, a 1px line that repeats as often as necessary, and the bottom. A CodePen demonstrates the effect.
See the Pen infinite refrigerator by Julia Evans on CodePen.
That’s all!
An explanation of the inner workings was started, but time ran out — maybe another day. The main trick: padding-bottom is a percentage of the parent element’s width, not its height, so it can create a box with a fixed aspect ratio.
