CSS Agent Pawns: An Experiment by Colin Bate

dabblet.css

/* CSS Agent Pawns: An Experiment by Colin Bate */

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

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

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

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

.agent.mr-green {
	background-color: #409944;
	background-image: -webkit-linear-gradient(top, #5AB35E, #409944 80%);
	box-shadow: 0px 4px 0 #0D6611, 0 5px 3px #444, 0 8px 6px #999;
}

.agent.mr-green:after {
	background-color: #409944;
	background-image: -webkit-radial-gradient(6px 5px, circle, #5AB35E, #0D6611);
	box-shadow: 1px 1px 0 #0D6611, 1px 3px 3px #27802B;
}

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

.agent.mr-orange {
	background-color: #e96823;
	background-image: -webkit-linear-gradient(top, #FF823D, #e96823 80%);
	box-shadow: 0px 5px 0 #B63500, 0 5px 3px #444, 0 8px 6px #999;
}

.agent.mr-orange:after {
	background-color: #e96823;
	background-image: -webkit-radial-gradient(6px 5px, circle, #FF823D, #B63500);
	box-shadow: 1px 1px 0 #B63500, 1px 3px 3px #D04F0A;
}

.agent {
	width: 50px; height: 20px;
	border-radius: 20px / 10px;
	position: relative;
	margin: 10px;
	font-size: 6px;
	display: inline-block;
	
}
.agent:after {
	content: "";
	width: 26px; height: 20px;
	position: absolute;
	top: -5px;
	left: 12px;
	border-radius: 13px / 10px;
}

body { text-align: center }

dabblet.html

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

settings.json

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