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:

<a href="http://www.cssnolanche.com.br/colunas-transparentes-cross-browser/#viewSource" target="_blank" rel="noopener noreferrer"></a><div id="column-1" class="container"><br /><div class="overlay"></div><br /><div class="content"><br /><h2>Content</h2><br /></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.

<a href="http://www.cssnolanche.com.br/colunas-transparentes-cross-browser/#viewSource" target="_blank" rel="noopener noreferrer"></a>#column-1 {<br />position: relative;<br />float: left;<br />width: 500px; /* lembre-se de definir <br />uma largura */<br />}

Agora vamos cuidar da transparência.

<a href="http://www.cssnolanche.com.br/colunas-transparentes-cross-browser/#viewSource" target="_blank" rel="noopener noreferrer"></a>.overlay{<br />  position: absolute;<br />  top: 0; /* Necessário definir a posição */<br />  bottom: 0;  /* irá cobrir o elemento pai */<br />  left: 0;<br />  width: 100%;<br />  background: #000;<br />  opacity: 0.65;<br />  -moz-opacity: 0.65; /* Browsers baseados no motor Gecko */<br />  filter:alpha(opacity=65); /* Para IE6 e 7 */<br />}<br />

Ok. Agora vamos aplicar algum estilo ao conteúdo. É importante
definir alguma largura fixa.

<a href="http://www.cssnolanche.com.br/colunas-transparentes-cross-browser/#viewSource" target="_blank" rel="noopener noreferrer"></a>#column-1 .content {<br />width: 460px;<br />padding: 20px;<br />}<br />

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 {<br />position: relative;<br />}

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 */<br />* html #column-1 .overlay {<br />  height: expression(document.getElementById("column-1").offsetHeight);<br />}

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.