Agora queremos falar de uma nova notação, que não é simplesmente uma maneira nova de expressar o mesmo, e sim uma maneira que nos permite definir cores por meio de valores adicionais. Trata-se da notação RGBA, que a partir de CSS 3 está disponível para os desenvolvedores.
A notação RGBA é uma maneira de especificar cores na qual se definem quatro valores. Os três primeiros são os bem conhecidos canais RGB (vermelho, verde e azul) e o quarto parâmetro é o canal Alpha, que não é mais que o grau de transparência ou opacidade da cor. O canal Alpha é um valor entre zero e um, sendo 0 totalmente transparente e 1 totalmente opaco.
No mundo do desenho talvez já tenhamos visto outros formatos ou sistemas que suportam cores com canal Alpha e por isso pode ser que já estejamos familiarizados com este parâmetro. O formato de imagem PNG, que tanto nos gosta por suportar transparência que se vê corretamente em todos os fundos possíveis, implementa justamente este canal alpha na definição da cor para conseguir uma transparência ideal.
Agora, por meio das cores em RGBA em CSS 3, poderemos aplicar novas transparências às cores que especificamos com CSS, abrindo novas possibilidades aos designers sem a necessidade de se complicar com pequenos truques como o uso de imagens de fundo semitransparentes em PNG, etc. Ademais, como as cores RGBA se podem aplicar a qualquer elemento que suporte atribuição de cor, as aplicações aumentam ainda mais. O único porém, pelo menos no momento de escrever este artigo, é que CSS 3 não está amplamente suportado por todos os navegadores. Por exemplo, Internet Explorer 8 não o suporta por enquanto.
rgba(255, 125, 0, 0.5);
Os três primeiros valores são números em sistema decimal, que correspondem com os valores de vermelho, verde e azul. Sempre têm que ser números entre 0 e 255.
O quarto valor é um número entre 0 e 1. Por exemplo, 0 seria totalmente transparente, 1 seria totalmente opaco e 0.5 seria uma transparência ao 50%, ou seja, metade opaco e metade transparente.
<div style="background-color: rgba(0, 0, 255, 0.1);">Esta camada tem fundo azul, quase transparente</div>
<span style="color: rgba(0,255,0,0.8);">Este texto é verde e tem um pouco de transparência</span>
Porém, à parte destes exemplos, o ideal é ver o efeito de transparência em funcionamento, para poder termos uma idéia mais aproximada das possibilidades. Para isso, construímos uma página onde se mostram várias camadas com cores e transparências, tanto no fundo como no texto.
Ver exemplo de cores CSS RGBA.
Porém, novamente chamamos a atenção dos leitores sobre o fato que, dependendo do navegador que se utilize, se verão ou não as distintas cores, visto que as CSS 3 não são compatíveis com todos os sistemas. Este exemplo funcionará bem em navegadores que cumpram os padrões, como Firefox, Chrome ou Safari, porém não em navegadores como Internet Explorer, que fazem a guerra por sua conta.
O código do anterior exemplo é o seguinte:
<html>
<head>
<title>Cores RGBA com CSS 3</title>
<style type="text/css">
div.quadrado{
width: 150px;
height: 40px;
border: 1px solid #dddddd;
margin: 5px;
}
div.textogrande{
font-family: verdana, arial, helvetica;
font-weight: bold;
font-size: 40pt;
}
</style>
</head>
<body>
<h1>Cores RGBA com CSS 3</h1>
<h2>Exemplo de camadas com fundo azul e várias transparências</h2>
<div class="quadrado" style="background-color: rgba(0, 0, 255, 0.1);"></div>
<div class="quadrado" style="background-color: rgba(0, 0, 255, 0.4);"></div>
<div class="quadrado" style="background-color: rgba(0, 0, 255, 0.7);"></div>
<div class="quadrado" style="background-color: rgba(0, 0, 255, 1);"></div>
<h2>Exemplo de camadas com fundo verde e várias transparências, sobre uma camada com fundo amarelo</h2>
<div style="background-color: #ff3; padding: 10px;">
<div class="quadrado" style="background-color: rgba(0, 255, 0, 0.1);"></div>
<div class="quadrado" style="background-color: rgba(0, 255, 0, 0.4);"></div>
<div class="quadrado" style="background-color: rgba(0, 255, 0, 0.7);"></div>
<div class="quadrado" style="background-color: rgba(0, 255, 0, 1);"></div>
</div>
<h2>Exemplo de camadas com fundo laranja e várias transparências, sobre uma camada com uma imagem de fundo</h2>
<div style="background-image: url(http://www.criarweb.com/artigos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;">
<div class="quadrado" style="background-color: rgba(255, 125, 0, 0.1);"></div>
<div class="quadrado" style="background-color: rgba(255, 125, 0, 0.4);"></div>
<div class="quadrado" style="background-color: rgba(255, 125, 0, 0.7);"></div>
<div class="quadrado" style="background-color: rgba(255, 125, 0, 1);"></div>
</div>
<h2>Exemplo de texto de cor vermelha e várias transparências, sobre uma camada com uma imagem de fundo</h2>
<div style="background-image: url(http://www.criarweb.com/artigos/exemplos/photoshop/fundo-neve/neve.gif); padding: 10px;">
<div class="textogrande" style="color: rgba(200, 0, 0, 0.3);">Este texto está para que se veja que pode ser também meio transparente</div>
<div class="textogrande" style="color: rgba(200, 0, 0, 0.7);">Este texto está para que se veja que pode ser também meio transparente</div>
</div>
</body>
</html>
Se se permite minha opinião, é uma pena que esta gestão de cor com canal alpha não esteja disponível em Internet Explorer 8, no momento de escrever estas linhas, porque assim se torna complicado usar este tipo de efeitos. Não obstante, é de supor que as pessoas de Microsoft colocaram em dia seu navegador em algum momento, para torná-lo compatível com as CSS 3 e as cores RGBA.
