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.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.