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>

Continuar lendo »