Calculator, hand-coded only with HTML and CSS3.

dabblet.css

/**
 * 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;
}

dabblet.html

<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>

settings.json

{"view":"split","prefixfree":"1","page":"css"}