Transparência em CSS

Artigo que explica como é possível criar cores com grau de transparência ou aplicar transparência a um elemento com a propriedade opacity do CSS 3.

Outro recurso bacana do CSS 3 é a transparência. Ela pode ser feita de duas maneiras:

  1. Através da propriedade opacity;
  2. Através da especificação de valores de cores com a "função" rgba.

No primeiro caso, todo o elemento fica com um nível de transparência (inclusive os elementos filhos e os textos). O valor da propriedade opacity pode variar de 0 (transparente) a 1 (opaco).

No segundo caso, é possível especificar a transparência apenas no fundo de um elemento, mantendo os elementos filhos opacos. A função rgba recebe quatro valores, sendo os três primeiro valores inteiros entre 0 e 255 (representando as componentes "red", "green" e "blue") e o último parâmetro indicando a transparência e valendo entre 0 (transparente) a 1 (opaco).

Exemplo:

div.mensagem {
  background-color: #0000FF;
  opacity: 0.2;
}

Caso seu navegador tenha suporte a esta propriedade, conseguirá ver o quadro abaixo com transparência:

Teste 1
Teste 1

Exemplo 2:

div.mensagem {
  background-color: rgba(0, 0, 255, 0.2);
}

Caso seu navegador tenha suporte a este recurso, conseguirá ver o quadro abaixo com transparência no fundo:

Teste 1
Teste 2

3 comentários

Rubens Takiguti Ribeiro (autor do blog) disse...

Realmente, Lucas.

O CSS 3 é uma especificação que ainda não está pronta. Alguns navegadores já vão adiantando alguns recursos, outros não. Porém, a idéia é utilizar transparência como um efeito visual adicional, e não um requisito para entendimento da página.

Abraão Zaidan disse...

Lucas, para IE devemos considerar o uso de CSS2.
No caso específico de opacidade, recomendo a leitura de http://www.quirksmode.org/css/opacity.html