The HTML & Javascript
<div style="width:235px;height:300px" id="css3calculator">
<form name="calc">
<p><a href="http://chrislorensson.com">Lorensson</a>CalCSS3</p>
<input type="text" name="input" size="16">
<span>888888888888888888888888888888888888</span>
<div>
<input type="button" name="one" value=" 1 " onclick="calc.input.value += '1'">
<input type="button" name="two" value=" 2 " onclick="calc.input.value += '2'">
<input type="button" name="three" value=" 3 " onclick="calc.input.value += '3'">
<input class="last function" type="button" name="plus" value=" + " onclick="calc.input.value += ' + '">
<input type="button" name="four" value=" 4 " onclick="calc.input.value += '4'">
<input type="button" name="five" value=" 5 " onclick="calc.input.value += '5'">
<input type="button" name="six" value=" 6 " onclick="calc.input.value += '6'">
<input class="last function" type="button" name="minus" value=" - " onclick="calc.input.value += ' - '">
<input type="button" name="seven" value=" 7 " onclick="calc.input.value += '7'">
<input type="button" name="eight" value=" 8 " onclick="calc.input.value += '8'">
<input type="button" name="nine" value=" 9 " onclick="calc.input.value += '9'">
<input class="last function" type="button" name="times" value=" x " onclick="calc.input.value += ' * '">
<input class="clearButton" type="button" name="clear" value=" c " onclick="calc.input.value = ''">
<input type="button" name="zero" value=" 0 " onclick="calc.input.value += '0'">
<input class="function" type="button" name="doit" value=" = " onclick="calc.input.value = eval(calc.input.value)">
<input class="last function" type="button" name="div" value=" / " onclick="calc.input.value += ' / '">
<hr size="0"/>
</div>
<hr size="0"/>
</form>
</div>
The CSS
@font-face {
font-family: 'Porsche';
src: url('fonts/911.eot?#iefix') format('embedded-opentype'),
url('fonts/911.woff') format('woff'),
url('fonts/911.ttf') format('truetype'),
url('fonts/911.svg#911PorschaRegular') format('svg'),
url('fonts/911.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
#css3calculator a {
font-family: Porsche;
color: white;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,.3);
}
@font-face {
font-family: 'Orbitron';
src: url('fonts/orbitron.eot');
src: url('fonts/orbitron.eot?#iefix') format('embedded-opentype'),
url('fonts/orbitron.woff') format('woff'),
url('fonts/orbitron.ttf') format('truetype'),
url('fonts/orbitron.svg#OrbitronLight') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Label';
src: url('fonts/ocra.eot');
src: url('fonts/ocra.eot?#iefix') format('embedded-opentype'),
url('fonts/ocra.woff') format('woff'),
url('fonts/ocra.ttf') format('truetype'),
url('fonts/ocra.svg#OCRAStdRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Digital';
src: url('fonts/digital.eot?#iefix') format('embedded-opentype'),
url('fonts/digital.woff') format('woff'),
url('fonts/digital.ttf') format('truetype'),
url('fonts/digital.svg#') format('svg'),
url('fonts/digital.eot') format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
input[type=button]:hover {
cursor: pointer;
}
#css3calculator {
float:left;
clear:right
}
#css3calculator input[type=text]:hover {
cursor: default;
}
@-webkit-keyframes calc {
0% {
opacity:0;
margin-left: -300px;
-webkit-transform:position }
100% {
opacity:1;
margin-left: 0;
-webkit-transform:position }
}
@-moz-keyframes calc {
0% {
opacity:0;
margin-left: -300px;
-moz-transform:position }
100% {
opacity:1;
margin-left: 0;
-moz-transform:position }
}
#calc-container {
-webkit-animation: calc .8s 1 ease-out;
-moz-animation: calc .8s 1 ease-out;
position: relative;
display: block;
float: left;
}
#css3calculator form {
display: block;
width: 100%;
height: 100%;
padding: 0 4% 4% 4%;
background-color: rgba(0,0,0,.2);
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
-opera-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-webkit-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-moz-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-o-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-opera-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-ms-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
-khtml-box-shadow:
inset 0 1px 0 rgba(255,255,255,.75),
inset 1px 0 0 rgba(255,255,255,.35),
inset -1px 0 0 rgba(0,0,0,.35),
inset 0 -1px 0 rgba(0,0,0,.65),
0 1px 3px rgba(0,0,0,.3),
inset 0 -100px 200px rgba(0,0,0,.35),
0 20px 25px -10px rgba(0,0,0,.6);
}
#css3calculator div {
padding: 5%;
width: 90%;
margin-top: 6%;
height: 62%;
background-color: rgba(0,0,0,.4);
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-o-border-radius: 3px;
-opera-border-radius: 3px;
-ms-border-radius: 3px;
-khtml-border-radius: 3px;
box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-webkit-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-moz-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-o-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-opera-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-ms-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
-khtml-box-shadow:
inset 0 1px 2px -1px rgba(0,0,0,.1),
inset 0 -1px 0 rgba(255,255,255,.4),
inset 0 -100px 200px rgba(0,0,0,.2);
}
#css3calculator hr {
display: block;
height: 1%;
margin-top: -1%;
position: relative;
clear: both;
padding: 0;
width: 100%;
border: none !important;
}
#css3calculator p {
font-family: Porsche;
display: block;
width: 100%;
clear: both;
font-size: 80%;
white-space: pre;
overflow: hidden;
text-align: right;
line-height: 150%;
padding-top: 3%;
margin-bottom: 3%;
text-shadow: 0 1px 0 rgba(255,255,255,.5);
color: black;
}
input, isindex, input::-webkit-input-list-button {
display: block;
border: none !important;
-webkit-appearance: none !important;
}
#css3calculator input[type=text] {
width: 100%;
padding: 0;
text-indent: .4em;
height: 15%;
border: none !important;
display: block !important;
clear: both;
font-family: Digital;
letter-spacing: .1em;
color: #88fdfa;
font-size: 150%;
background-color: #999;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#1affffff');
background: -webkit-gradient(linear, left top, left bottom, from(#292929), color-stop(50%, #5f5f5f), color-stop(50%, #1a1a1a), to(#000000));
background: -moz-linear-gradient(top, #434343, #5e5e5e 50%, #181818 51%, #010101);
background: -o-linear-gradient(top, #434343, #5e5e5e 50%, #181818 51%, #010101);
background: -ms-linear-gradient(top, #434343, #5e5e5e 50%, #181818 51%, #010101);
box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-webkit-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-moz-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-o-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-opera-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-ms-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
-khtml-box-shadow:
inset 40px 0 50px rgba(0,0,0,.6),
inset -40px 0 50px rgba(0,0,0,.6),
0 1px 0 rgba(255,255,255,.3),
0 -1px 0 rgba(0,0,0,.3);
text-shadow: 0 0 2px rgba(255,255,255,.8),
0 0 15px rgba(255,255,255,.8);
}
#css3calculator span {
display: block;
position: relative;
opacity: .2;
overflow: hidden;
margin-bottom: -10%;
text-indent: .4em;
top:-10.9%;
font-family: Digital;
letter-spacing: .1em;
color: #88fdfa;
font-size: 150%;
z-index: 10;
text-shadow: none;
}
#css3calculator input[type=button] {
width: 20.5%;
font-family: Orbitron;
margin-right: 6%;
margin-bottom: 6%;
display: block !important;
white-space: normal !important;
padding: 0 !important;
height: 20%;
line-height: 15%;
text-align: center;
border-radius: 3px;
float: left;
font-size: 100%;
box-sizing: normal;
box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 20px 20px -10px rgba(255,255,255,.1),
inset 0 -1px 0 rgba(0,0,0,1);
border: none !important;
background-color: rgba(0,0,0,.6);
color: rgba(255,255,255,.8);
text-shadow: 0 -1px 0 rgba(0,0,0,.5);
cursor: pointer;
}
#css3calculator input[type=button].function {
text-shadow: 0 1px 0 rgba(255,255,255,1);
background-color: rgba(255,255,255,.7);
color: rgba(0,0,0,.8);
box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.1),
0 -1px 0 rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 20px 20px -10px rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.6);
font-size: 150%;
}
#css3calculator input[type=button].function:hover {
background-color: rgba(255,255,255,.8);
color: black;
box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-o-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 -1px 0 rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.5),
inset 0 0 20px white;
text-shadow: 0 1px 0 rgba(255,255,255,1);
}
.last {
margin-right: 0 !important;
clear: right;
}
#css3calculator input[type=button].clearButton {
background-color: red;
color: rgba(255,255,255,.8);
box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 -30px 30px -20px rgba(0,0,0,.3),
inset 0 -1px 0 rgba(0,0,0,1);
}
#css3calculator input[type=button].clearButton:hover {
background-color: red;
color: white;
box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 1px 0 rgba(255,255,255,.15),
inset 0 30px 30px -20px rgba(0,0,0,.05),
inset 0 -1px 0 rgba(0,0,0,1);
}
#css3calculator input[type=button].clearButton:active {
background-color: red;
color: white;
box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.2),
0 -1px 0 rgba(0,0,0,.4),
inset 0 0 30px -5px rgba(0,0,0,.3);
text-shadow: 0 0 4px white;
}
#css3calculator input[type=button]:hover {
background-color: rgba(0,0,0,.8);
color: white;
text-shadow: 0 -1px 0 black;
}
#css3calculator input[type=button]:active {
color: #88fdfa;
text-shadow: 0 0 4px white,
0 0 20px rgba(255,255,255,1);
box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.2),
inset 0 0 30px -5px rgba(0,0,0,.4),
inset 0 -1px 0 rgba(0,0,0,1);
}
#css3calculator input[type=button].function:active {
background-color: rgba(255,255,255,.8);
color: black;
box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-webkit-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-moz-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-o-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-opera-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-ms-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
-khtml-box-shadow:
0 1px 0 rgba(255,255,255,.25),
0 -1px 0 rgba(0,0,0,.25),
inset 0 0 3px rgba(0,0,0,.6),
inset 0 0 30px -5px rgba(0,0,0,.2);
text-shadow: 0 0 4px white;
}
Kudos to Paul Irish for these gorgeous browser icons, and to agilesoft for the resizing functionality.