Logos feitos com CSS. Como assim???
Autor: Higor | Publicado: 2010-07-29T15:47:00-03:00

Você não está sonhando não amigo, é isso mesmo. Logo feito com puro CSS. Os caras estão se superando. Saca alguns exemplos aí:
JQuery Logo 
Olympic Logo
BMW LogoVí o assunto no CSSnolanche e fui mais a fundo e fiquei impressionado. Uma gota com degradê e o caramba a quatro, e o código.
Esse é o logo de um aplicativo do Mozilla.
Agora vamos ao HTML, que é muito simples:&nbsp;
&lt; div class="logo"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop0"&gt;&nbsp;&nbsp; &lt; div class="raindrop1"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop2"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop3"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop4"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop5"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop6"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop7"&gt;
&nbsp;&nbsp;  &lt; div class="raindrop8"&gt; 
&lt; /div&gt; 
Agora o CSS:

.logo {
&nbsp;&nbsp;&nbsp; position: relative;
&nbsp;&nbsp;&nbsp; width: 256px;
&nbsp;&nbsp;&nbsp; height: 256px;
&nbsp;&nbsp;&nbsp; margin: 20px auto;
}.raindrop0 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 64%;
&nbsp;&nbsp;&nbsp; left: 0px;
&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp; height: 50%;
&nbsp;&nbsp;&nbsp; -moz-border-radius: 100%;
&nbsp;&nbsp;&nbsp; background: transparent -moz-radial-gradient(50% 50%, ellipse farthest-corner,&nbsp;
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 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 0px;
&nbsp;&nbsp;&nbsp; left: 0px;
&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp; height: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; 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 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 3%;
&nbsp;&nbsp;&nbsp; left: 3%;
&nbsp;&nbsp;&nbsp; width: 94%;
&nbsp;&nbsp;&nbsp; height: 94%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; background: transparent -moz-radial-gradient(30% 55%, circle cover, 
rgba(0,105,149,0) 70%, rgba(0,105,149,0.8) 80%);
}.raindrop3 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 3%;
&nbsp;&nbsp;&nbsp; left: 3%;
&nbsp;&nbsp;&nbsp; width: 94%;
&nbsp;&nbsp;&nbsp; height: 94%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; background: transparent -moz-radial-gradient(50% 10%, ellipse cover, 
rgba(0,105,149,0) 73%, rgba(0,105,149,0.3) 80%);
}.raindrop4 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 0px;
&nbsp;&nbsp;&nbsp; left: 0px;
&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp; height: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; -moz-box-shadow:inset rgba(124, 197, 238, 1) 0px 0px 48px;
}.raindrop5 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 0px;
&nbsp;&nbsp;&nbsp; left: 0px;
&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp; height: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; 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 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 35%;
&nbsp;&nbsp;&nbsp; left: 10%;
&nbsp;&nbsp;&nbsp; width: 80%;
&nbsp;&nbsp;&nbsp; height: 60%;
&nbsp;&nbsp;&nbsp; -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
&nbsp;&nbsp;&nbsp; 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 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 45%;
&nbsp;&nbsp;&nbsp; left: 20%;
&nbsp;&nbsp;&nbsp; width: 75%;
&nbsp;&nbsp;&nbsp; height: 55%;
&nbsp;&nbsp;&nbsp; -moz-transform: matrix(1, -0.5, 0, 1, 0, 0);
&nbsp;&nbsp;&nbsp; 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 {
&nbsp;&nbsp;&nbsp; position: absolute;
&nbsp;&nbsp;&nbsp; top: 0px;
&nbsp;&nbsp;&nbsp; left: 0px;
&nbsp;&nbsp;&nbsp; width: 100%;
&nbsp;&nbsp;&nbsp; height: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-topright: 100%;
&nbsp;&nbsp;&nbsp; -moz-border-radius-bottomleft: 100%;
&nbsp;&nbsp;&nbsp; -moz-box-shadow:inset rgba(191, 235, 255, 0.8) 0px 0px 12px;
}














*UPDATE 30/07 12h 
E tem mais galera, o símbolo do IE totalmente em CSS.

Agora veja a renderização nos browsers...

O desenvolvedor é o Andreas Jacob e aqui é a fonte das imagens.

Imagine programas de vetores esportando em CSS3, cara, é o futuro!
via (cssnolanche)