Baseball Scoreboards

Avoiding the design rut with HTML and CSS-only art.

I try to avoid getting too repetitive with design by doing different things with the same tools.

Example: In 2023, I decided to merge my childhood love of baseball with my grown up love of code. Given all the toys CSS provides today, could I make realistic looking baseball-themed pieces with nothing but markup and styles?

Referencing old photographs, I replicated two classic baseball scoreboards with this rule: No images. No Javascript. Just pure HTML and CSS.

A screenshot of Wrigley Field, 1941 — **Wrigley Field, 1941**: I played with perspective and geeked out on CSS animations to mimic time: The rain drops, darkening skies, clock hands, waving flags, and casted shadows. View the scoreboard

A screenshot of Comiskey Park, 1978 — **Comiskey Park, 1978**: I went overboard on CSS grid. Every light bulb is a div, turned on with the class lit. It was fun to turn on each bulb individually, and leave an occasional one burnt out. View the scoreboard

Here's a final sentimental piece: The original two tickets from my first Cubs game (I still have them!).

A screenshot of two tickets from the first Cubs game I attended — **Imperfect game**: I had a blast replicating the imperfections of physical tickets. The Cubs logo off-centered one pixel up and to the left of the white background. The perforations of the edges using a dotted 1px white border. The tiniest drop of blur on the monospace font to make it look printed on. Oh, and the Cubs won 15-2 that day. View the tickets

Using HTML and CSS in a different context gave me a broader perspective on how I can use these tools. We don't always need to rely on imagery or scripting for the fancy stuff.

Note: The CSS could be reduced and DRYed up a bit, but my focus for these projects was to expand my comfort with CSS, not on absolutely pristine code. Ya know, in case you're viewing source 🙂.

What relevance does this have with product design? Simple. If Basecamp ever needed an old-timey scoreboard view, I'm your guy.