Resizable <i> Cloud

dabblet.css

/* Resizable <i> Cloud */

html {
    min-height: 100%;
    font-size: 1em;

    background-image: -webkit-radial-gradient(#E5E8EB,#8894A2);
    background-image: -moz-radial-gradient(#E5E8EB,#8894A2);
    background-image: -o-radial-gradient(#E5E8EB,#8894A2);
    background-image: -ms-radial-gradient(#E5E8EB,#8894A2);
    background-image: radial-gradient(#E5E8EB,#8894A2);
}

html:after {
    background-image: -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -webkit-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
    background-image: -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -moz-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
    background-image: -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -o-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
    background-image: -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), -ms-linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));
    background-image: linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125)), linear-gradient(45deg, rgba(0,0,0,0.0125) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.0125) 75%, rgba(0,0,0,0.0125));

    -webkit-background-size: 2px 2px;
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    background-position: 0 0, 1px 1px;
    display: block;
    content: "";
}

.cloud {
	display: inline-block;
	background-color: #fff;
	width: 3em;
	height: 1em;
	border-radius: 3em;
	position: relative;
	box-shadow: 0 0.063em 0 0 rgba(0,0,0,0.5);
}

.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: -.35em -1.5em;
}


.icon {
	width:3.750em;
	height:3.750em;
	border-radius: 0.375em;
	box-shadow:inset 0 0.063em 0 0 rgba(255,255,255,0.5),
	0 0.063em 0 0 rgba(0,0,0,0.35);
	border:0.063em solid rgba(0,0,0,0.7);
	background:-webkit-linear-gradient(#3E9BE6,#1C466F);
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -0.5em -1.5em;
}

dabblet.html

<div class="icon"><i class=cloud></i></div>

<img style="position:absolute;top:50%;left:50%;margin:-127px 300px;z-index:-2" src="http://dribbble.com/system/assets/67/5897/screenshots/566064/icloud.png">

settings.json

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