CSS no Lanche

Transparência é um efeito que, infelizmente, não têm 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>
</div>

Em primeiro lugar queremos definir o emeneto 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.

#column-1 {
  position: relative;
  float: left;
  width: 500px; /* lembre-se de definir uma largura */
}

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.

#column-1 .content {
    width: 460px;
    padding: 20px;
}

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 post é uma tradução do post original do blog: Bits & Pixels.