Skip to content

Instantly share code, notes, and snippets.

@tsironis tsironis/dabblet.css
Created Jan 16, 2012

Embed
What would you like to do?
Calculator, hand-coded only with HTML and CSS3.
/**
* Calculator, hand-coded only with HTML and CSS3.
*/
body {background: #eee;}
h1 {text-align: center; font-family: 'Consolas', monospace; font-weight: normal; font-size: 3em;}
#calc {
width: 250px;
padding: 25px;
border-radius: 5px;
margin: 0 auto;
margin-top: 3em;
background: url("http://tsironis.isnap.gr/images/stripes-1.png");
-webkit-box-shadow: 0 4px 3px #777;
-moz-box-shadow: 0 4px 3px #777;
box-shadow: 0 4px 3px #777;
}
#buttons { margin: 0 auto; width: 240px;}
#buttons div, .enter {
background: #E8E8E8;
display: inline-block;
text-align: center;
width: 42.5px;
height: 40px;
margin: 5px;
padding-top: 15px;
border: 1px solid #aaa;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow: 0 1px 1px #ccc;
-moz-box-shadow: 0 1px 1px #ccc;
box-shadow: 0 1px 1px #ccc;
font: 20px Sans-Serif;
white-space: nowrap;
vertical-align: middle;
color: #666;
cursor: pointer;
}
#buttons div:hover, #buttons div:focus, .enter:hover, .enter:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
#buttons div:active, .enter:active{
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}
.enter { width: 150px; margin-left: 10px;;}
input {
width: 200px;
margin: 10px 10px 20px;
font-family: 'Consolas', monospace;
font-size: 2em;
-webkit-box-shadow: 0px 0px 5px #999;
-moz-box-shadow: 0px 0px 5px #999;
box-shadow: 0px 0px 5px #999;
}
<h1>Da calculator</h1>
<div id="calc">
<input class="monitor" type="text" value="0">
<div id="buttons">
<div class="seven">7</div>
<div class="eight">8</div>
<div class="nine">9</div>
<div class="plus">+</div>
<div class="four">4</div>
<div class="five">5</div>
<div class="six">6</div>
<div class="minus">-</div>
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="mul">*</div>
<div class="zero">0</div>
<div class="d-zero">00</div>
<div class="comma">.</div>
<div class="div">/</div>
</div>
<div class="enter">Enter</div>
</div>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.