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

Jason Knight
CodeX
Published in
13 min readJan 5, 2023

--

Part 1 of 5

A HTML/CSS rendered “calculator”. Only images used wer a noise transparency to texture the beige plastic case, and of course the desktop background.
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”.

--

--

Jason Knight
CodeX

Accessibility and Efficiency Consultant, Web Developer, Musician, and just general pain in the arse