Member-only story

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”.

--

--

CodeX
CodeX

Published in CodeX

Everything connected with Tech & Code. Follow to join our 1M+ monthly readers

Jason Knight
Jason Knight

Written by Jason Knight

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

Responses (3)