Colunas transparentes Cross Browser
Transparência é um efeito que, infelizmente, não tem obtido muito uso
na web durante a sua história. Uma das maiores razões para isso é a
falta de apoio para PNGs com canais alfa no IE6. Isso está começando a
mudar com IE 7 e Firefox, ganhando mais e mais terreno nos sistemas
Windows.
A maioria dos desenvolvedores web já deve estar ciente de que é
possível utilizar PNGs com canais alfa, mas isso contempla vários
problemas e não funciona muito bem quando você adiciona conteúdo em cima
deles.
Existe uma maneira de tornar os conteúdos transparentes, usando a tag
opacity e um código proprietário de opacidade para o Internet Explorer.
O problema é como esta propriedade CSS se baseia, onde todos os filhos
herdam a transparência também, que muitas vezes não é o efeito desejado.
Sabendo tudo isto, como vamos criar colunas transparentes que possam
trabalhar em todos os navegadores? E se pudéssemos usar a propriedade de
opacidade, mas ainda tem o conteúdo opaco?
Isso é possível utilizando algumas técnicas de posicionamento em CSS.
O que vamos fazer é ter um elemento pai que contenha 2 filhos. Um fundo
transparente que ocupa toda a largura e altura do pai, e um filho que
contenha o conteúdo. Dessa forma podemos ter um fundo transparente,
enquanto o conteúdo permanece opaco.
Vamos ao trabalho
A base da marcação que iremos utilizar é a seguinte:
<div id="column-1" class="container"><div class="overlay"></div><div class="content"><h2>Content</h2></div>6.</div>Em primeiro lugar queremos definir o elemento container com position:
relative; e float: left; isso permite-nos utilizar posicionamento
absoluto e faz com que o elemento pai possa conter vários filhos.
Agora vamos cuidar da transparência.
.overlay{ position: absolute; top: 0; /* Necessário definir a posição */ bottom: 0; /* irá cobrir o elemento pai */ left: 0; width: 100%; background: #000; opacity: 0.65; -moz-opacity: 0.65; /* Browsers baseados no motor Gecko */ filter:alpha(opacity=65); /* Para IE6 e 7 */}Ok. Agora vamos aplicar algum estilo ao conteúdo. É importante
definir alguma largura fixa.
Ok, quase tudo já foi feito. Como você deve ter notado (se você está
me seguindo), o texto é colocado sob a cobertura transparente. Para
corrigir isso, devemos definir o conteúdo com position: relative;
.content {position: relative;}Ok, agora ele funciona em todos os browsers, exceto o IE6. Vamos
corrigir isso. Digite o seguinte expressão CSS:
/* Faça o uso do hack * html para que só o IE6 entenda essa regra */* html #column-1 .overlay { height: expression(document.getElementById("column-1").offsetHeight);}Se você planeja utilizá-lo em um site ativo, você pode utilizar conditional comments ao
invés do kack estrela. Mas para este exemplo isso será suficiente.
Desvantagem
É também digno de nota que não vai funcionar no IE6 se o JavaScript
estiver desativado. Outra desvantagem é que cada coluna tem seu próprio
ID e sua própria regra CSS para IE6. Não podemos viver com isso.
Conclusão
E aí está! Aqui você pode ver um exemplo funcional.
Colunas transparentes Cross Browser.
*
Esse artigo é uma tradução do original do blog: Bits &
Pixels.
