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.
Amazing Windows 7 Calculator UI Using Pure CSS3


demo
download

See the demo first.
Window Frame Design
Amazing Windows 7 Calculator UI Using Pure CSS3Window 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
Amazing Windows 7 Calculator UI Using Pure CSS3Complete 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.