Logos feitos com CSS. Como assim???

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 Logo

Ví 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: 

< div class="logo">
   < div class="raindrop0">

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

Agora o CSS:

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














*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)