Outro recurso bacana do CSS 3 é a transparência. Ela pode ser feita de duas maneiras:
- Através da propriedade opacity;
- 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:
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:
3 comentários
Muito interessante.
Mas no IE 8, não funcionou. No chrome e firefox funciona normal.
Falou.
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.
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
Postar um comentário
Nota: fique a vontade para expressar o que achou deste artigo ou do blog.
Dica: para acompanhar as respostas, acesse com uma conta do Google e marque a opção "Notifique-me".
Atenção: o blogger não permite inclusão de tags nos comentários, por isso, use algum site externo para postar seu código com dúvidas e deixe o link aqui. Exemplo: pastebin.com