Quem nao conhece essa historia?!"Dizem que havia um cego sentado na calcada, com um bone a seus pes e um pedaco de madeira que, escrito com giz branco, "Por favor, ajude-me, sou cego". Um publicitario da area de criacao que passava em frente a ele, parou e viu umas poucas moedas no bone.Sem pedir licenca, pegou o cartaz, virou-o, pegou o giz e escreveu outro anuncio. Voltou a colocar o pedaco de madeira aos pes do cego e foi embora. Pela tarde o publicitario voltou a passar em frente ao cego que pedia esmola. Agora, o seu bone estava cheio de notas e moedas. O cego reconheceu as pisadas e lhe perguntou se havia sido ele quem reescreveu seu cartaz, sobretudo querendo saber o que havia colocado. O publicitario respondeu: "Nada que nao esteja de acordo com o seu anuncio, mas com outras palavras". Sorriu e continuou seu caminho. O cego nunca soube, mas seu novo cartaz dizia: "Hoje e Primavera, e nao posso ve-la". Mudemos a estrategia quando nao nos acontece alguma coisa... Se for verdade que nada e perfeito, tambem e verdade que tudo pode ser melhorado." (Autor desconhecido) Voce nao esta sonhando nao amigo, e isso mesmo. Logo feito com puro CSS. Os caras estao se superando. Saca alguns exemplos ai:JQuery Logo Olympic LogoBMW LogoVi o assunto no CSSnolanche e fui mais a fundo e fiquei impressionado. Uma gota com degrade e o caramba a quatro, e o codigo.Esse e o logo de um aplicativo do Mozilla.Agora vamos ao HTML, que e 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,