Amazing Windows 7 Calculator UI Using Pure CSS3

Published on March 1, 2013

In one of my previous post Amazing Windows7 Start Menu Using Pure CSS3 I have explained how easily we can create desktop UI using our lovely CSS3. In that post we had created  Windows 7 Start Menu using CSS3. In today’s post i will explain how to create Windows Calculater(calc) UI using Pure CSS3. I search on google if any one else have created this before or not. I found no result. So, This is going to appear for first time on Techumber.com . I am so exited. Let’s start.

See the demo first. Window Frame Design Window Frame Design(Html)

<div class="calc">
  <p>Calculater</p>
  <div class="wcmd">
    <a class="min"></a>
    <a class="max"></a>
    <a class="close"></a>
  </div>
  <div class="calc-in">
    <!-- Buttons and display go here-->
  </div>
</div>

Window Frame Design(CSS)

.calc {
  width: 228px;
  height: 244px;
  border: 1px solid #ddd;
  border: solid 1px #102a3e;
  overflow: visible;
  display: inline-block;
  margin: 60px 0 0 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  box-shadow: inset 0 0 1px #fff;
  -moz-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px #fff;
  background-color: #619bb9;
  background: -moz-linear-gradient(
    top,
    rgba(50, 123, 165, 0.75),
    rgba(46, 75, 90, 0.75) 50%,
    rgba(92, 176, 220, 0.75)
  );
  background: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#327aa4),
    color-stop(45%, #2e4b5a),
    to(#5cb0dc)
  );
}
.calc .calc-in {
  width: 212px;
  height: 205px;
  background: #d9e4f1;
  margin: 7px;
  border: solid 1px #102a3e;
  bottom: 0;
  position: absolute;
}

.calc p {
  background: url('calc-icon.png') no-repeat;
  padding-left: 15px;
  margin: 8px;
  margin-top: 5px;
  color: #fff;
  float: left;
}
.wcmd {
  float: right;
  margin-right: 7px;
}
.wcmd a {
  float: left;
}
.wcmd .min {
  background: url('min.png') no-repeat;
  width: 29px;
  height: 19px;
}
.wcmd .max {
  background: url('max.png') no-repeat;
  width: 27px;
  height: 19px;
}
.wcmd .close {
  background: url('close.png') no-repeat;
  width: 48px;
  height: 19px;
}

Complete Calc Design Complete Calc(HTML)

<div class="calc">
  <p>Calculater</p>
  <div class="wcmd">
    <a class="min"></a>
    <a class="max"></a>
    <a class="close"></a>
  </div>
  <div class="calc-in">
    <form id="calcform">
      <input id="display" type="text" value="0" />
      <div class="num-wrap">
        <button id="n7" value="7">7</button>
        <button id="n8" value="8">8</button>
        <button id="n9" value="9">9</button>
        <button id="ndiv" value="/">/</button>
        <button id="nmod" value="%">%</button>
        <button id="n4" value="4">4</button>
        <button id="n5" value="5">5</button>
        <button id="n6" value="6">6</button>
        <button id="nmul" value="*">*</button>
        <button id="nC" value="C">C</button>
        <button id="n1" value="1">1</button>
        <button id="n2" value="2">2</button>
        <button id="n3" value="3">3</button>
        <button id="nsub" value="-">-</button>
        <button id="neq" vlaue="=">=</button>
        <button id="n0" value="0">0</button>
        <button id="nP" value=".">.</button>
        <button id="nadd" vlaue="+">+</button>
      </div>
    </form>
  </div>
</div>

Compleate Calc(CSS)

.calc {
  width: 228px;
  height: 244px;
  border: 1px solid #ddd;
  border: solid 1px #102a3e;
  overflow: visible;
  display: inline-block;
  margin: 60px 0 0 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  position: relative;
  box-shadow: inset 0 0 1px #fff;
  -moz-box-shadow: inset 0 0 1px #fff;
  -webkit-box-shadow: inset 0 0 1px #fff;
  background-color: #619bb9;
  background: -moz-linear-gradient(
    top,
    rgba(50, 123, 165, 0.75),
    rgba(46, 75, 90, 0.75) 50%,
    rgba(92, 176, 220, 0.75)
  );
  background: -webkit-gradient(
    linear,
    center top,
    center bottom,
    from(#327aa4),
    color-stop(45%, #2e4b5a),
    to(#5cb0dc)
  );
}
.calc .calc-in {
  width: 212px;
  height: 205px;
  background: #d9e4f1;
  margin: 7px;
  border: solid 1px #102a3e;
  bottom: 0;
  position: absolute;
}

.calc p {
  background: url('calc-icon.png') no-repeat;
  padding-left: 15px;
  margin: 8px;
  margin-top: 5px;
  color: #fff;
  float: left;
}
.wcmd {
  float: right;
  margin-right: 7px;
}
.wcmd a {
  float: left;
}
.wcmd .min {
  background: url('min.png') no-repeat;
  width: 29px;
  height: 19px;
}
.wcmd .max {
  background: url('max.png') no-repeat;
  width: 27px;
  height: 19px;
}
.wcmd .close {
  background: url('close.png') no-repeat;
  width: 48px;
  height: 19px;
}
#display {
  width: 190px;
  margin: 0px;
  border: 1px solid #aaa;
  font-size: 40px;
  color: #333;
  text-align: right;
  font-size: 40px;
  position: relative;
  top: 10px;
  left: 10px;
  height: 50px;
  border-radius: 3px;
}
.num-wrap {
  margin: 20px auto;
  width: 186px;
}
#n0 {
  width: 71px;
  height: 25px;
}
#neq {
  width: 34px;
  height: 59px;
  float: right;
}
.calc button {
  width: 34px;
  height: 27px;
  border: 1px solid #9eaabb;
  border-radius: 3px;
  margin-bottom: 5px;
}
button:hover {
  cursor: pointer;
}

That’s it. Share if you like.