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="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>
< 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)
2 comentários
You can view more of my CSS logos here: http://robustnessiskey.com/csslogos
Olá ! Muito interessante seu post, ele já foi publicado!
Obrigado por nos prestigiar!
Atenciosamente.
Antoani/Equipe Link Premiado
http://www.linkpremiado.com.br
Postar um comentário
Peço que leiam, se possível, antes de expor sua opinião. Não se acanhe, apenas coloquei algumas observações para que o bom convívio e a boa discussão domine este espaço:
- Comentário de acordo com o assunto abordado;
- Nada de ofensas, racismo e essas coisas aí; (eu sei que vocês não fazem isso, só to seguindo o protocolo xD)
- Eu sei que é um blog que inclui publicidade, mas comercial aqui não, por favor. Tem a sessão ANUNCIE.
Simples, não? Volte sempre, ou continue lendo.