Opa! Após um grande tempo de pesquisa e estudos, voltei! E pra ficar! Hoje postarei uma matéria de CSS, que achei muito legal e resolvi traduzir (eu e o Google rs) e em breve postarei: “JCarousel e AJAX: Você pode!”. Aguardem…
Por hora, digo que navegando por esses mares de “zero”s e “um”s, achei um blog muito interessante, o CSSTricks (em inglês). Neste blog, o genial Chris Coyier, conhecido como Tio Chico Addans, postou sobre como fazer para que a imagem de BackGround ocupasse toda a tela, sem gerar scrollsbar e sem deixar a imagem “feia”, pixelizada (mais uma palavra que eu inventei), que seria aquele aspecto cheio de quadrados e desfocado.
Para tal façanha, o Gênio escreveu dois posts, um “ensaio“, que apresenta algumas falhas mas também é uma boa leitura, e o “Perfect“, que não precisa nem descrever. Neste post, lhes apresentarei uma técnica do “ensaio”, por ser muito simples e de alta qualidade (pode ser útil) e os dois da versão final. Mão na massa!
Método #1
Sem JavaScript. Só no CSS mesmo! Primeiramente, o código HTML:
<img src="images/bg.jpg" alt="" />
Só isso mesmo! A imagem “bg.jpg” refere-se a imagem que se deseja utilizar. É importantíssimo que ela tenha uma altura maior que a altura máxima do monitor do visitante do seu site. Também é importantíssimo que ela tenha largura com tamanho bom, para evitar o efeito de pixelização, já citado posteriormente. Chega de bla-bla e vamos ao CSS:
#img.source-image {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Pronto! Aqui um exemplo do próprio CSSTricks.
Um projeto muito interessante do Chris com esse conceito é o What’s The Weather? Vale a pena conferir.
Método #2
O método 2 é do post “Perfect full page BackGround Image”, e é uma técnica vista neste site. Pretende realizar as seguintes façanhas:
- Preencher a página inteira com a imagem, sem espaços em branco;
- Redimensionar a imagem conforme o necessário;
- Manter as proporções da imagem;
- A imagem está centralizada na página;
- Não causa scrollbars;
- Ser Cross-browser (compatívelcom todos os Browsers, exceto em alguns casos o IE6 (novidade!));
- Não ser uma fantasia com Flash.
Primeiramente, criamos uma div com id #bg (para a imagem de fundo), e outra div com id# cont (para o conteudo), desta forma:
<div id="bg">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td><img src="images/bg.jpg" alt=""/></td>
</tr>
</table>
</div>
</div>
<!-- Div de Conteudo -->
<div id="cont">
<div>
Escreva seu conteudo aqui
</div>
</div>
Então, criamos os estilos:
img.bg {
/* Regras de preenchimento do fundo */
min-height: 100%;
min-width: 1024px;
/* Seleção de escala apropriada */
width: 100%;
height: auto;
/* Posicionamento da Imagem */
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
}
div#content {
/* Super-Importante */
/* Nosso conteudo DEVE aparecer sobre a Imagem */
position: relative;
/* Algumas gracinhas pra ficar bonito, mas nao altera a funcionalidade */
width: 500px;
margin: 0 auto;
background: #fff;
padding: 20px;
font-family: helvetica, arial, sans-serif;
font-size: 10pt;
line-height: 16pt;
-moz-box-shadow: #000 4px 4px 10px;
-webkit-box-shadow: #000 4px 4px 10px;
}
body {
margin: 0;
padding: 20px 0 0 0;
}
Veja um exemplo dessa prática. Muito interessante! Este segundo método foi criado pelo Doug Neiner, como versão alternativa, mas na minha opinião é melhor por não necessitar de JavaScript pra “acertar” problemas (apesar de apresentar alguns bugs no IE6 e IE7).
Por enquanto é só, mas em breve mais soluções ai pra galera!
Dúvidas, agradecimentos, soluções, reclamações, todos, exceto o último, serão bem vindos! ^^
