Techumber

Amazing Windows 7 Calculator UI Using Pure CSS3

Github avatar
Dimpu
March 01, 2013. 4 min read

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(topundefined rgba(50undefined 123undefined 165undefined 0.75)undefined rgba(46undefined 75undefined 90undefined 0.75) 50%undefined rgba(92undefined 176undefined 220undefined 0.75));
background: -webkit-gradient(linearundefined center topundefined center bottomundefined from(#327aa4)undefinedcolor-stop(45%undefined #2e4b5a)undefined 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(topundefined rgba(50undefined 123undefined 165undefined 0.75)undefined rgba(46undefined 75undefined 90undefined 0.75) 50%undefined rgba(92undefined 176undefined 220undefined 0.75));
background: -webkit-gradient(linearundefined center topundefined center bottomundefined from(#327aa4)undefinedcolor-stop(45%undefined #2e4b5a)undefined 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.


...