A propriedade de opacidade do CSS3 pode ser usada em cima de imagens ou fundos escuros para que possamos destacar algum outro conteúdo, como textos, formulários ou menus.
Como a maioria das propriedades do CSS3, essa também ainda não funciona nos navegadores mais antigos ou em outros que não seguem o padão W3C, por isso não é muito recomendado em alguns casos. Veja a lista de compatibilidades abaixo:
Funciona:
» Firefox 2 e 3beta4
» Safari 3.0 win e Safari 3.1 win
» Opera 9.5beta
Não funciona:
» IE 5.5, IE 6 e IE 7 (com filtros)
» IE 8beta1
» Konqueror 3.5.7
Essa propriedade pode ser aplicada à todos os elementos da página. Seu valor fica entre 0.0 e 1.0 sendo 0.0 completamente transparente.
Tutorial:
Agora mostrarei um exemplo simples. O arquivo fonte pode ser baixado aqui (arquivo .zip).
Código HTML
<div id="container">
<div class="opacidade" />
<div class="txt">
<h1>Opacidade CSS3</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sapien odio, elementum ut, bibendum sed, laoreet vel, tortor. Nulla sed dui et lorem pellentesque varius.</p>
</div>
</div>
O código HTML deve posuir uma div vazia para o efeito de opacidade e a div do conteúdo ("txt") com o que você quiser dentro. Criei a div "container" para melhor visualização do conteúdo.
O CSS
.opacidade {
background:#FFF;
bottom:10px;
height:118px;
padding:10px;
position:absolute;
right:10px;
width:174px;
}
.opacidade {
opacity:0.7;
filter:alpha(opacity=70);
-moz-opacity: 0.70;
}
.txt {
background:transparent;
padding:10px;
position:absolute;
right:0;
top:0;
}
No CSS, dexei os estilos para o efeito da transparência em um bloco separado apenas para o código ficar mais organizado. Mas isso não é obrigatório. A propriedade "opacity" funciona para os navegadores que seguem os padrões W3C; o filtro criado é para que funcione nos navegadores IE e seu valor varia de 0 à 100; e "-moz-opacity" é para os navegadores Mozilla e seus valores vão de 0.00 à 0.100.
Já não é difícil achar esse efeito nos sites atuais, vi esse efeito mais usado com bibliotecas Ajax em galerias ou alertas.
Aqui detalhei apenas um jeito de se fazer esse efeito. Os outros que eu conheço é usando uma imagem png, ou já fazer a imagem com o quadrado transparente. Nenhuma delas está errada, mas usando imagem png tem que fazer alguns hacks para que funcione em todos os navegadores.
Esse efeito é muito bom para compor o design da página, mas não com um uso exagerado.
;)
Fontes: Tabela de compatibilidades CSS [en] | CSS3 Color Module – W3C [en]
