How CSS Is Reducing The Need For Images — Let’s Style A Calculator

Part 1 of 5

This was my first attempt, can I do better?

Recently I came across this tweet about making a retro looking calculator using just HTML and CSS. It’s a decent implementation though I disliked all the excess “DIV for nothing” and classes. Those of you who regularly read my writings are likely not shocked by that at all.

I took my own initial stab at it, but was thinking “I can do better” and that it would be an excellent topic for an article. I’d also like to do this in a way that’s uniquely “mine”.

The original “Kass” posted on Muskie’s dumpster fire (twitter):

Doesn’t look/feel like real keys to me, because the lighting angle is both non-standard, and unrealistic. This stands to reason though as the art they were working from kind-of looks the same.

Bottom-lighting always looks a bit wrong or off.. to me at least. It’s why it’s used in theatre and stage for villains or to make someone look evil. I mean take Marko from Nightwish during “Romanticide”.

Underlighting with a palor reducing hue

It is accepted practice that on computers “artificial” shadowing is done as if the light is top-left. This is actually the result of usability studies that were joint performed between IBM, Apple, and Microsoft in the late ‘80’s which influenced not just Windows and OS/2, but Microsoft Office on all platforms and many things Apple would later implement. Though early on Apple disliked shadowing because their video hardware couldn’t do it efficiently.

It’s also a bit of a wonk they have the “specular” or “occidental” highlight on all four sides. The “off” sides would not have specular at all, there would be no specular on straight “below lit” lighting. The counter side would have an oriental dark spot, not an occidental.