CSS no Lanche

Pra quem duvidava do que o CSS era capaz, já mostrei aqui o desenvolvimento do logo do Opera somente com CSS. E dessa vez, o desenvolvedor Sean Martell criou uma gota de chuva com puro CSS. Ou se prefirir, o logo do aplicativo da Mozilla com puro CSS.

Dêem só uma olhada no processo de desenvolvimento na imagem abaixo:

Como podem ver, o HTML é muito simples:

<div class="logo">
	<div class="raindrop0"></div>
	<div class="raindrop1"></div>
	<div class="raindrop2"></div>
	<div class="raindrop3"></div>
	<div class="raindrop4"></div>
	<div class="raindrop5"></div>
	<div class="raindrop6"></div>
	<div class="raindrop7"></div>
	<div class="raindrop8"></div>
</div>

E abaixo, o CSS utilizado:

.logo {
	position: relative;
	width: 256px;
	height: 256px;
	margin: 20px auto;
}

.raindrop0 {
	position: absolute;
	top: 64%;
	left: 0px;
	width: 100%;
	height: 50%;
	-moz-border-radius: 100%;
	background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner, rgba(0,0,0,0) 0%, rgba(0,105,149,0.4) 37%, rgba(80,80,80,0.1) 47%, rgba(80,80,80,0) 58%);
}

.raindrop1 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(20% 20%, rgba(255,255,255,1) 22%, rgba(255,255,255,0.2) 30%, rgba(74,193,186,0.5) 45%, rgba(0,168,243,0.7) 65%, rgba(255,255,255,1) 100%);
}

.raindrop2 {
	position: absolute;
	top: 3%;
	left: 3%;
	width: 94%;
	height: 94%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(30% 55%, circle cover, rgba(0,105,149,0) 70%, rgba(0,105,149,0.8) 80%);
}

.raindrop3 {
	position: absolute;
	top: 3%;
	left: 3%;
	width: 94%;
	height: 94%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(50% 10%, ellipse cover, rgba(0,105,149,0) 73%, rgba(0,105,149,0.3) 80%);
}

.raindrop4 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	-moz-box-shadow:inset rgba(124, 197, 238, 1) 0px 0px 48px;
}

.raindrop5 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	background: transparent -moz-radial-gradient(30% 30%, ellipse cover, rgba(0,105,149,0) 50%, rgba(255,255,255,0.9) 72%, rgba(255,255,255,0.6) 90%);
}

.raindrop6 {
	position: absolute;
	top: 35%;
	left: 10%;
	width: 80%;
	height: 60%;
	-moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
	background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(145,240,234,0.8) 6%, rgba(145,240,234,0.1) 25%, rgba(145,240,234,0) 30%);
}
.raindrop7 {
	position: absolute;
	top: 45%;
	left: 20%;
	width: 75%;
	height: 55%;
	-moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
	background: transparent -moz-radial-gradient(73% 73%, ellipse farthest-corner, rgba(255,255,255,1) 6%, rgba(255,255,255,0.1) 25%, rgba(255,255,255,0) 30%);
}

.raindrop8 {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	-moz-border-radius-bottomright: 100%;
	-moz-border-radius-topright: 100%;
	-moz-border-radius-bottomleft: 100%;
	-moz-box-shadow:inset rgba(191, 235, 255, 0.8) 0px 0px 12px;
}

Vejam agora o resultado final: Raindrop logo com CSS.