On Building Software
Recreating Baseball Scoreboards Out of Plain Old HTML and CSS
When I started designing for the web, there wasn’t much you could do to make sites look fancy with just HTML and CSS. So, splicing up Photoshop images and anchoring them to a page with <table>s was how many of us built sites.
But nowadays, the capabilities of CSS are expansive.
Last year, I started a little hobby of making things on the web that had nothing to do with websites or SaaS products. I decided to recreate baseball scoreboards out of just HTML and CSS.
I’ve always had a fascination for scoreboards and old stadiums. Perhaps that’s where I got my original fix for the design of utilitarian things.
With this project, I let go of my normal penchant to write clean, organized code. No thought about web standards, DRY code, or even performance — I only cared about how the pages ultimately rendered. It was a fun way to use the materials I’ve always used in a new, freeing way.
I guess this made my life-long relationship with design come full circle.
Here are the screenshots of my first two attempts with direct links to the page.
My first finished piece is Wrigley Field, 1941. I added some CSS animations to make the team pennants appear to ripple in the wind. The scoreboard clock even moves about 10 minutes (sped up dramatically), and you can see the first drops of rain as the clouds darken across the afternoon sky.
I used the perspective directive of the transform property, along with rotations, to give the right skew to the entire piece. Honestly, I don’t really understand how perspective works—it was purely trial and error. (Normally, I’d feel the need to understand what’s happening!)
You can visit the page here:
My second finished piece is Comiskey Park, 1978. Morning turns into the early afternoon.
There is so much detail in the original scoreboard, and I hope I convey that here. Each scoreboard light bulb is represented as its own unique <div> and I can “turn on” each bulb by adding a class. It was fun finding old photos of the scoreboard to make sure I had the appropriate number of rows and columns for each lighted section.
I’m using a fair amount of box-shadow properties to give the scoreboard dimension—under the lights that overhang the top of the main board and the fence and rail system at the bottom.
I applied linear-gradients along the horizontal wires on the bottom so as to make them look natural and warn. Otherwise, it would appear like a 1 pixel straight white line across the entire screen.
And notice on the very bottom, where the white light bulbs make up the chevron shape, some bulbs appear darker than others, as if they’re blown out. At least that was my goal.
You can visit the page here:
Each scoreboard has its own story with its own challenges and nuances. I’m not sure I’ll keep going with this project but if I do, they’ll live right here:
Thanks for reading!
