<i> Cloud

dabblet.css

/* <i> Cloud */

html {
	min-height: 100%;
	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: 14px;
	height: 14px;
	border-radius: 100%;
	top: -6px;
	left: 7px;
	box-shadow: 0 -2px 2px rgba(0,0,0,.05);
}

.cloud:after {
	width: 23px;
	height: 23px;
	left: auto;
	right: 7px;
	top: -10px
}

.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"}