Sarah L. Fossheim

sarah@fossheim.io

Developer + Designer

Design of the Abatron 803 calculator replicated in CSS

Recently I came across the design of the Abatron 803, a calculator from 1975. I thought it looked really good, so I decided to recreate the design in HTML/CSS.

I only used fonts from Google Fonts, so the type is not an exact match, and I also simplified the design a bit.

The bars on top are made with gradients as part of the calculator background:

.calculator {
background: linear-gradient(#C4C9C3, #C6C8C7),
    linear-gradient(
        #C6C8C7 25%,
        #484939 27%,
        #87877B 30%,
        #87877B 32%,
        #E7E7DD 33%,
        #C6C8C7 33.5%,
        ..., /* Repeat */
        #C6C8C7 98.5%
    );
background-size: 100%, 100% 80px;
background-position: 0 80px, top left;
background-repeat: no-repeat;
}

The depth of the keys is also created with gradients:

.number {
  background: linear-gradient(90deg, #182629, #4B5556 80%);
  background-size: 100%;
  background-position: top left;

}

.number .key-content {
  background: radial-gradient(#3E4C4D, #38474A, #343E3F);
  background-size: 150% 350%;
  background-position: center center;
}

The full code can be viewed on CodePen.

Right now there's no functionality tied to it, since my main goal was to recreate a physical product in CSS. But I am planning on turning it into a functional calculator with JavaScript in the future.

Credit also has to go to the Avatron 903M design (based on the original Abatron calculator) by Keith Sereby on Dribbble, which inspired me to make a version of the Abatron 803 in CSS.


Hi 👋 I'm Sarah, a multidisciplinary developer and designer, specialized in creating complex and data-heavy products that are accessible, ethical and user friendly. I also enjoy making art with CSS. On here, I frequently write about HTML/CSS, React, Python, UX design, accessibility and data visualizations.

If you like my work, consider sharing this post, buying me a coffee, becoming a patron or connecting with me on Twitter. I'm also on Twitch, CodePen, dev.to and GitHub.

Similar post | 2020-04-18

Re-creating a Macintosh with gradients and box-shadows

css front-end showcase

Similar post | 2020-03-13

How to create an accordion hover effect with box-shadows

css front-end tutorial