Realistic skeumorphic CSS calculator

This is still a work in progress. The aesthetic is inspired by the Teenage Engineering K.O. II Sampler.

I spent way too long messing with the glare using a CSS clip-path which is probably not the best tool for the job — but at least I understand clip-path now 😤

You can play with the slider below!

TE-FX877

10-DIGIT CALCULATOR

0

AC

±

%

÷

×

-

+

=

.

0

7

8

9

4

5

6

1

2

3

My next step is adding some global control for the drop shadow direction and depth for each element.