CSS Counters: An Experiment by Colin Bate

dabblet.css

/* CSS Counters: An Experiment by Colin Bate */

.counter.mr-gray {
	background-color: #b8bfb9;
	box-shadow: 0px 4px 0 #858C86, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-blue {
	background-color: #2569cc;
	box-shadow: 0px 4px 0 #003699, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-red {
	background-color: #c0001b;
	box-shadow: 0px 4px 0 #8D0000, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-purple {
	background-color: #303c9b;
	box-shadow: 0px 4px 0 #000968, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-green {
	background-color: #409944;
	box-shadow: 0px 4px 0 #0D6611, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-yellow {
	background-color: #feed38;
	box-shadow: 0px 4px 0 #CBBA05, 0 5px 3px #444, 0 8px 6px #999;
}

.counter.mr-orange {
	background-color: #e96823;
	box-shadow: 0px 4px 0 #B63500, 0 5px 3px #444, 0 8px 6px #999;
}

.counter {
	border-top: 1px solid #f1f1f1;
	width: 20px; height: 20px;
	border-radius: 10px;
	position: relative;
	margin: 10px;
	font-size: 6px;
	display: inline-block;
	background-image: linear-gradient(top, #fe0e01, #f101f1 50%)
}
body { text-align: center }

dabblet.html

<div class="counter mr-green"></div>
<div class="counter mr-gray"></div>
<div class="counter mr-blue"></div>
<div class="counter mr-red"></div>
<div class="counter mr-purple"></div>
<div class="counter mr-yellow"></div>
<div class="counter mr-orange"></div>

settings.json

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}