Amazing Windows 7 Calculator UI Using Pure CSS3

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.

demo download

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.

loading..