Resizable <i> Cloud

dabblet.css

/* Resizable <i> Cloud */

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

.cloud {
	display: inline-block;
	background-color: #fff;
	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.4em;
	left: 0.4375em;
}

.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":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}