Help
Tive vendo que algumas pessoas tinham curiosidade em saber mais sobre como funciona um efeito em CSS, no qual percebesse que o "fundo" fica estático enquanto o layout rola verticalmente, dando a impressão que ele desliza sobre à página.
Aqui temos o Layout que demostra a utilização deste recurso.
Então criaremos um novo documento, pode ser tanto no Dreamweaver quanto em qualquer outro editor de texto simple, como bloco de notas. Agora temos que intender algumas etapas importantes para a criação, que nesse caso iremos utilizar DIV's prezando sempre o hábito desta TAG na criação de nossas páginas HTML/(X)HTML, onde nossa estrutura completa terá que ser reconhecida por mais de um browser, no caso utilizei para testes o IE (Internet Explorer) e o FF (FireFox) sendo a sua formatação em CSS, acabei optando por utilizar um recurso chamado Cometários Condicionais e usei um CSS padrão para o FireFox e o condicional para o Internet Explorer, assim poderei sempre gerar dois CSS para ser visualizado em diferentes Browser's. Agora aqui abaixo temos a estrutura básica em HTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<!--[if IE]>
<link href="style_flutuante_ie.css" rel="stylesheet" type="text/css" />
<![endif]-->
<link href="style_flutuante.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="global">
<div id="titulo">Utilizar DIV Flutuante com Opacidade CSS </div>
<br />
<br />
<div id="bonzai"></div>
<div id="corpo">
<h1>Historia do Bonsai </h1>
<p>Aqui Fica o Conteudo.</p>
</div>
</div>
</body>
</html>
QUOTE
Salve este Documento com nome Index.html
Agora temos abaixo a estrutura CSS padrão, no caso que comentei acima, este CSS é o responsável para que a estrutura seja visualizada no FireFox:
CODE
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
-moz-opacity: .5;
height: 433px;
position: absolute;
left: 85px;
top: 190px;
}
#global {
text-align: center;
width: 772px;
margin: 0 auto;
}
body {
margin: 0;
}
#corpo {
margin-left: 100px;
height: 600px;
width: 600px;
background-image: url(corpo2.gif);
background-repeat: no-repeat;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
padding-right: 24px;
padding-left: 24px;
text-align: justify;
text-indent: 20px;
color: #333333;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
padding-top: 30px;
padding-left: 24px;
font-weight: bold;
color: #333333;
text-align: center;
}
body {
background-image: url(fundo2.gif);
background-attachment: fixed;
margin: 0px;
}
#titulo {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #333333;
margin-left: -270px;
}
QUOTE
Salve este documento com o nome style_flutuante.css
Agora temos nosso último CSS que no caso será o condicional, ele será o resposável para o layout ser visualizado no Internet Explorer:
CODE
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
filter: Alpha(Opacity=50);
height: 433px;
position: absolute;
margin-left: 35px;
margin-top: -10px;
}
#global {
text-align: center;
width: 772px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
body {
margin: 0;
}
#corpo {
height: 600px;
width: 600px;
background-image: url(corpo2.gif);
background-repeat: no-repeat;
}
p {
font-family: "Times New Roman", Times, serif;
font-size: 12px;
padding-right: 24px;
padding-left: 24px;
text-align: justify;
text-indent: 20px;
color: #333333;
}
h1 {
font-family: "Times New Roman", Times, serif;
font-size: 14px;
padding-top: 30px;
padding-left: 24px;
font-weight: bold;
color: #333333;
text-align: center;
}
body {
background-image: url(fundo2.gif);
background-attachment: fixed;
margin: 0px;
}
#titulo {
font-family: "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #333333;
text-indent: 90px;
}
QUOTE
Salve este documento com o nome style_flutuante_IE.css
QUOTE
Pronto, terminamos de mostrar toda a estrutura do layout, temos aqui as imagens disponíveis para ser colocado no layout:
Corpo da Página. (Salve esta imagem com o nome: corpo2.gif)
Imagem Bonsai. (Salve esta imagem com o nome: bonzai2.gif)
Imagem de Fundo. (Salve esta imagem com o nome: fundo2.gif)
Corpo da Página. (Salve esta imagem com o nome: corpo2.gif)
Imagem Bonsai. (Salve esta imagem com o nome: bonzai2.gif)
Imagem de Fundo. (Salve esta imagem com o nome: fundo2.gif)
Agora entraremos no intendimento da formatação CSS, o importante é você ter uma visão diferente de como observar o resultado antes dele estar pronto, isso é saber sobre as TAG's com que você está trabalhando, então mãos a obra um observar as estruturas baixo, comentarei o CSS padrão primeiro:
QUOTE
ID CSS Feito para FireFox
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
-moz-opacity: .5;
height: 433px;
position: absolute;
left: 85px;
top: 190px;
}
ID CSS feito para Internet Explorer
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
filter: Alpha(Opacity=50);
height: 433px;
position: absolute;
margin-left: 35px;
margin-top: -10px;
}
Então temos ai um chaveamento de um ID que se chama #bonzai, tendo propriedades importantes que podemos ver no Tutorial que postei anteriormente, mas de novidade temos ai uma TAG -moz-opacity: .5; que serve para causar efeito de Opacidade (clareamento da imagem), sendo que o aconselhável é sempre exportar imagens para trabalhar assim com formato .GIF, pois na maioria das vezes como vai usar DIV's terá que sobrepor Layers em cima de layers, tendo então que trabalhar com imagens que venha exportadas com fundo transparente, esta TAG tem característica especifica do FireFox, por isso não confunda com Alpha(Opacity=?) pois ela serve para causar um efeito de opacidade para Layout que seram visualizados no Internet Explorer, sendo sua utilização também não aconselhada no FireFox, mas esperamos que no CSS3, isso se resolva e contribua para uma WEB unificada.
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
-moz-opacity: .5;
height: 433px;
position: absolute;
left: 85px;
top: 190px;
}
ID CSS feito para Internet Explorer
#bonzai {
width: 350px;
background-image: url(bonzai2.gif);
background-repeat: no-repeat;
filter: Alpha(Opacity=50);
height: 433px;
position: absolute;
margin-left: 35px;
margin-top: -10px;
}
Então temos ai um chaveamento de um ID que se chama #bonzai, tendo propriedades importantes que podemos ver no Tutorial que postei anteriormente, mas de novidade temos ai uma TAG -moz-opacity: .5; que serve para causar efeito de Opacidade (clareamento da imagem), sendo que o aconselhável é sempre exportar imagens para trabalhar assim com formato .GIF, pois na maioria das vezes como vai usar DIV's terá que sobrepor Layers em cima de layers, tendo então que trabalhar com imagens que venha exportadas com fundo transparente, esta TAG tem característica especifica do FireFox, por isso não confunda com Alpha(Opacity=?) pois ela serve para causar um efeito de opacidade para Layout que seram visualizados no Internet Explorer, sendo sua utilização também não aconselhada no FireFox, mas esperamos que no CSS3, isso se resolva e contribua para uma WEB unificada.
QUOTE
ID CSS Feito para FireFox
#global {
text-align: left;
width: 772px;
margin: 0 auto;
}
ID CSS Feito para Internet Explorer
#global {
text-align:left;
width: 772px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Agora temos uma comparação da ID global, que no caso é de fundamental importância em um layout criado em DIV's pois ele é responsável para agrupar as DIV's do BODY, sendo esta a forma correta, pois ja abservei casos em que Colocam para agrupar e até mesmo centralizar um layout, uma TABLE, sendo que o correto Seria uma DIV global que ficaria responsável para para fazer este agrupamento e na hora de configuralo faria isso tudo pelo CSS, então ai temos de uma forma de formatação CSS que está responsável justamente para fazer isso, sendo que na TAG margin podemos observar uma pequena diferença na estrutura entre eles, mas isso fica somente na aparência pois na prática os dois exemplos (FireFox e do Internet Explorer) estão fazendo a mesma função, então esta ai as formas diferentes de se centralizar um layout, caso tenham interesse em saber mais sobre como centralizar temos uma matéria que do Diego Eis no TABLELESS que comenta mais sobre o assunto.
#global {
text-align: left;
width: 772px;
margin: 0 auto;
}
ID CSS Feito para Internet Explorer
#global {
text-align:left;
width: 772px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Agora temos uma comparação da ID global, que no caso é de fundamental importância em um layout criado em DIV's pois ele é responsável para agrupar as DIV's do BODY, sendo esta a forma correta, pois ja abservei casos em que Colocam para agrupar e até mesmo centralizar um layout, uma TABLE, sendo que o correto Seria uma DIV global que ficaria responsável para para fazer este agrupamento e na hora de configuralo faria isso tudo pelo CSS, então ai temos de uma forma de formatação CSS que está responsável justamente para fazer isso, sendo que na TAG margin podemos observar uma pequena diferença na estrutura entre eles, mas isso fica somente na aparência pois na prática os dois exemplos (FireFox e do Internet Explorer) estão fazendo a mesma função, então esta ai as formas diferentes de se centralizar um layout, caso tenham interesse em saber mais sobre como centralizar temos uma matéria que do Diego Eis no TABLELESS que comenta mais sobre o assunto.
QUOTE
ID CSS Feito para FireFox e Internet Explorer
body {
background-image: url(fundo2.gif);
background-attachment: fixed;
margin: 0px;
}
Ai esta nosso segredinho para fazer o "efeito deslizante", bem simples, apenas temos uma propriedade chamada background-attachment: fixed; que fixa a imagem de fundo colocada na TAG BODY. Então finalizamos, sendo que espero que tenha aproveitado o tutorial, não esquecendo de sempre aquecer seus conhecimentos.
body {
background-image: url(fundo2.gif);
background-attachment: fixed;
margin: 0px;
}
Ai esta nosso segredinho para fazer o "efeito deslizante", bem simples, apenas temos uma propriedade chamada background-attachment: fixed; que fixa a imagem de fundo colocada na TAG BODY. Então finalizamos, sendo que espero que tenha aproveitado o tutorial, não esquecendo de sempre aquecer seus conhecimentos.
Aproveitem e até mais
Adriano Aguiar - adrianoaguiaralves@gmail.com
Em caso de duvidas postem abaixo ou utilizem nosso Fórum de CSS..
