Efeito 3D com CSS

Fala galera. Depois do post criando logos com css, não parei por lá e continuei a pesquisa, até que cheguei nesse site. Aí eu falei, perai, já são duas da manhã, eu to sonhando né?! Não!! O cara fez um 3D com puro CSS! Sem flash, sem javascript mano. Vale a pena conferir.

Aqui tem uma breve explicação de como funciona, agora nesse aqui que 'tá' o bicho, nos mínimos detalhes. Impressionante.

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)

CSS3 | Usando fonts externas

Tipografia web sempre foi difícil de lidar, vários aspectos eram levados em consideração. Mas o sonho de todos que trabalham com web virou realidade. Agora é possível sim utilizar uma fonte externa, mesmo o usuário não tendo aquela fonte, ele irá visualizá-la.

O texto abaixo é originalmente do tableless.com.br.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
  font-family: helveticaneue;
  src: url('HelveticaNeueLTStd-UltLt.otf');
}
Na primeira linha você dá um nome para a Font que você está  importando. Pode
ser qualquer nome.

Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}
Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o
browser carrega primeiramente o texto com a font padrão do sistema e
logo depois monta o texto com as fonts corretas. Nada de outro mundo
para quem utiliza imagens para substituir textos. Mesmo assim, pode ser
um incomodo para alguns.
Suponhamos que você queira oferecer a font para os que não a tem
disponivel no sistema, mas para que o site carregue mais rápido, queira
utilizar a cópia local do sistema do usuário caso ele a tenha instalado:
@font-face {
  font-family: helveticaneue;
  src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Compatibilidade

A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.
Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.
Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto.

Fonts pagas

O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.