Return to Home

The Apple Calculator

June 13th, 2014

The power of CSS3 is pretty amazing. The ability to create gradients, round corners, and basic shapes makes web design so much less tedious than the days of splicing images. As another creative exercise, I wanted to test the power CSS3. I decided to make a fully functional replica of the Mac OS X dashboard calculator using purely JS/CSS/HTML and no images.

Here is a screenshot of what the calculator should look like:

By sampling the colors carefully, building lots of round buttons, and constructing many gradients I was able to get it pretty close. Below is the finished working replica. The MC, MR, M+, M- buttons don’t work, and it is not exactly perfect, but it does do calculations! (P.S. It doesn’t look good in Internet Explorer)

See the Pen OPgEKX by Jordan Soltman (@jordansoltman) on CodePen.