<i> Cloud

dabblet.css

/* <i> Cloud
 * by Dan Eden (http://dabblet.com/gist/2945570)
 * I just made it scale via font-size on .cloud
 */

html {
	min-height: 100%;
	background: linear-gradient(#b4bcbf, #fff);
}

.cloud {
	display: inline-block;
	background-color: #fff;
	font-size:64px;
	width: 3em;
	height: 1em;
	border-radius: 3em;
	position: relative;
	box-shadow: inset 0 -1px rgba(255,255,255,.6), 0 2px 2px rgba(0,0,0,.1), inset 0 -2px 2px rgba(0,100,160,.1);
}

.cloud:before, .cloud:after {
	content:'';
	position: absolute;
	background-color: #fff;
	width: 0.875em;
	height: 0.875em;
	border-radius: 100%;
	top: -0.375em;
	left: 0.4375em;
	box-shadow: 0 -2px 2px rgba(0,0,0,.05);
}

.cloud:after {
	width: 1.4375em;
	height: 1.4375em;
	left: auto;
	right: 0.4375em;
	top: -0.625em;
}

.cloud { /* This stuff is just for the demo */
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -.5em -1.5em;
}

dabblet.html

<i class=cloud></i>

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}