Esses dois dias tenho apanhado bastante tentando criar uma “general overlayer” (Gostou do nome? Na verdade ela recebe várias outras denominações, pelo que pude perceber em pesquisas na internet, pois até então, pra mim, e pra uma porção de gente, ela era simplesmente “uma-tela-translúcida-que-sobrepõe-todo-o-conteúdo-de-uma-página-web”.
Apanhei pois queria muito realizar de uma forma que não precisasse fazer uso de JavaScript, ou melhor, queria utilizar somente CSS. Demorou, mas consegui e agora faço questão de expor minha experiência nessa luta ferrenha.
O esqueleto básico da página, é o mais simples possível, tanto que não vamos apresentá-lo aqui, afinal de contas é um arquivo html padrão, e no seu corpo uma DIVs, uma chamada “overlayer”.
Vamos ao que interessa, o CSS. Primeiramente, vamos definir as margens das tag body, no intuito de zerar os parâmetros de posicionamento dos objetos imediatamente descendentes dele. Assim:
body {
margin:0;
padding:0;
height:100%;
};
Agora vamos definir as propriedades básicas da DIV:
#overlayer{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#ff0000;
};
Esse código é suficiente para que o nosso objetivo seja atingido, “mas a vida é uma caixinha de surpresas” e como não poderia deixar de ser, não é o bastante para que o IE funcione da forma esperada.
Dessa forma temos que fazer alguns pequenos ajustes, substituímos o valor “fixed” da propriedade “position” por “absolute”, acrescentamos um css hack, assim:
#overlayer{
position:absolute;
...
};
#overlayer[id]{
position:fixed;
};
Agora só nos falta acrescentar o efeito alpha a DIV, dando a impressão de translucidez a mesma. Façamos com que ela fique 80% de opacidade, e como se pode ver tem tratamentos diversos para uma porção de navegadores disponíveis no mercado:
#overlayer{
...
-moz-opacity:0.8;
opacity:.80;
filter:alpha(opacity=80);
};
É claro que não podemos esquecer de configurar a propriedade “z-index” para um valor qualquer que seja maior que o dos outros elementos a serem sobrepostos, pode ser ao em torno de 999, por exemplo.
Esse exemplo, foi testado em: Firefox 2.0.0.12, Opera 9.23, Flock 1.0.1, Internet Explorer 6.0 e 7.0, SeaMonkey 1.1.4, Safari 3 Public Beta.
Bom, é isso. Espero que isso seja útil pra alguém, tanto quanto foi pra mim.
