quinta-feira, 11 de fevereiro de 2010

Criando o truque de background do site Think Geek

Há alguns dias, fuçando no site Think Geek, eu notei uma coisa em seu layout que quase derreteu meu cérebro. Se você já visitou o site deles, já deve saber do que estou falando, não é mesmo? Sim, o fundo de tela que se altera de acordo com que você movimenta na página.

Não vou negar que aquilo me fez derreter meus neurônios por todo esse mês de dezembro janeiro. No entanto, eu descobri que o tal recurso nem era tão difícil de implementar. Chega a ser ridiculamente simples, mas dá um visual muito doido onde vc colocar ele.

Pensando nisso, e pensando nas centenas de milhares de pessoas que devem estar interessadas nesse recurso, resolvi fazer um simples tutorial de como fazer funcionar essa mágica CSS.

Criando o truque de background do site Think Geek

Primeiramente, vamos a algumas considerações sobre o efeito "mágico" ...




O esquema "mágico" do background do site Think Geek nada mais é do que a superposição de imagens. A imagem que contém as figuras possui um fundo transparente, enquanto por trás desta uma imagem em degradê entre as duas cores das figuras.

Não entendeu? O que acontece é que uma parte do degradê combina exatamente com as cores de parte das silhuetas na imagem, e a outra parte com as silhuetas restantes, e ao mesmo tempo, o fundo com as silhuetas é fixo enquanto o degradê é móvel, fazendo com que em determinado momento a junção das duas imagens faça desaparecer parte das silhuetas. Ainda não entendeu? Entre no site Think Geek e confira novamente, subindo e descendo a página. Você verá que não é a imagem que some, e sim o degradê que se movimenta. Se você prestar atenção, parte das imagens combina com a cor do começo do degradê e a outra parte combina com o final. Taí o grande segredo.

Vamos fazer o nosso então?

Primeiramente, os pré-requisitos ...

Editor de Imagens de sua preferência. Eu pessoalmente uso o Gimp pois tenho muito mais experiência com ele.

Imagens (ou silhuetas) para fazer a montagem. É interessante que você use silhuetas prontas, mas nada impede que você crie as suas

Escolher as cores de trabalho. Como usaremos um gradiente de cores, seria muito interessante que você escolhesse duas cores que permitam um degradê mais suave.

Montando a imagem das Silhuetas.

Tendo em mente que você sabe usar o seu editor de imagens, o que você fará é criar uma imagem com fundo transparente e ir colocando as silhuetas nas cores que você escolheu para seu degradê.

Primeiramente, crie duas camadas, que você usará para trabalhar com cada um dos conjuntos de silhuetas. Se você estiver usando alguma imagem da internet, é interessante eliminar o anti-aliasing que há na maioria das imagens baixadas. Existem duas soluções: A primeira é usar a opção Cores\Limite ou usar a opção Camada\Transparência\Cor para Alfa. A segunda opção deixa a coisa mais profissional por tratar do anti-alias, enquanto a primeira é mais útil por limitar as bordas do desenho. Em qualquer uma das duas opções, você alcançará o resultado desejado.

Depois de montar as imagens, em uma das camadas altere o contraste da imagem e não se esqueça de depois pegar o novo valor da cor. Isso será necessário para criarmos o nosso degradê. Agora salve esse documento e reserve.

O degradê é fácil de fazer. Uma maneira de você capturar as cores é abrir os dois projetos de imagem ao mesmo tempo e no projeto das silhuetas, usar a ferramenta seleção de cores (um conta-gotas) e selecionar cada cor para uma das opções de cores do gimp.

Em seguida, você vai usar a ferramenta Mistura e criar o seu degradê no projeto em branco. Agra exporte as duas imagens, o degradê em jpg, o arquivo das silhuetas em png (pq precisamos do recurso de transaprência) e vamos agora brincar com CSS.

Montando a página.

Como citado antes, o efeito "mágico" acontece quando o degradê se movimenta por trás da imagem com as silhuetas. Isso é fácil de conseguir, colocando fundo nas camadas. Vamos começar pelo nosso arquivo html:

<html>
<head>
<title>Background "Mágico</title>
</head>
<body>
<div id="raiz">
<div id="conteudo">

</div>
</div>
</body>
</html>


Agora, vamos adicionar o degradê como fundo da nossa página:

body {
margin: 0;
padding: 0;
background: #404040 url(gradiente.jpg) repeat-x bottom left;
}


Atente para os seguintes fatos: a cor #404040 é a cor de uma das camadas da imagem com as silhuetas e colocamos o gradiente no final da página. Isso implica que somente quando alcançarmos o final da mesma, o gradiente aparecerá e mostrará as outras imagens, escondidas pela cor.

Agora, vamos montar o CSS da primeira camada:

#raiz {
width: 100%;
background: url(silhuetas.png) repeat-x center bottom;
background-attachment: fixed;
}


Aqui, centralizamos nossa imagem e a colamos ao final da camada. No entanto, o uso da declaração background-attachment: fixed faz com que a imagem fique colada à borda inferior da janela, mesmo quando a página é rolada.

Finalmente, um estilo adicional para a div conteúdo, só para podermos ver o efeito:

#conteudo {
width: 750px;
margin: 0 auto;
background-color: #000;
}

Aqui, a largura da camada de conteúdo pode ser de qualquer tamanho. O fundo dela, também, pode ser de qualquer cor, já que o efeito será visto do lado de fora da camada.

Prováveis problemas.

Se você não tiver conteúdo suficiente, pode ser que você não consiga ver a imagem porque o gradiente não alcançou o final da página. Uma solução seria determinar um tamanho mínimo para a camada, de forma a fazer com que o efeito sempre apareça, independente da quantidade de conteúdo.

Outro problema é relacionado ao IEca6. Como ele não suporta a transparência de PNGs, você não pode fazer nada. A melhor solução é usar um hack e esconder a imagem de fundo, deixando somente o gradiente. Como sei que a maioria não usa O IEca6, não é algo para se preocupar. Mas, se quiser manter a compatibilidade, vc pode usar o seguinte hack:

* html #wrapper {background-image: none;}


Esse hack não segue o padrão, mas o IEca6 o reconhece como válido, sumindo, então, com a transparência. Quem mandou usar um browser ultrapassado!

Se você gostou do exemplo, pode baixá-lo na íntegra aqui: bg_magico.rar

Não foi a montagem perfeita, mas ela serviu pra exemplificar o nosso tutorial.

Espero que vocês tenham gostado. Abração e até uma próxima postagem!

Fontes das imagens:

http://www.pioroberson.com/

http://www.eddymayer.com/index.php?option=com_portfolio&Itemid=5&cat=Character%20Design&imageid=231

http://2.bp.blogspot.com/_zney_cOiDZM/Rz_yfXlzToI/AAAAAAAAADI/tEoR-c7cNy0/s320/silhouette.jpg