Cores RGBA em CSS 3

Veremos o que são as cores RGBA e sua notação, que se incluem na especificação de Folhas de Estilo em Cascata CSS 3.

Por Miguel Angel Alvarez - Tradução de JML


Publicado em: 30/11/09
Valorize este artigo:
Como sabemos, as cores em HTML se expressam em valores RGB, igual que em CSS, que admite diversas notações para definir a cor, através de números em hexadecimal e inclusive em decimal. Tudo isto supomos que não será um mistério para os leitores, que sem dúvida já terão experimentado com CSS e provavelmente estejam familiarizados com as distintas notações para especificar cor nas folhas de estilo.

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.

Nota: Em CriarWeb.com publicamos vários artigos sobre CSS 3, que se podem acessar através do seguinte link: introdução a CSS3.

Notação de cor RGBA

Para definir uma cor RGBA, se devem especificar quatro valores, da seguinte maneira:

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.

Exemplos de estilos CSS com cores definidos por RGBA

Agora vejamos vários exemplos de cores definidos com CSS e a notação RGBA.

<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.





Manual: CSS 3

Comentários do artigo
Foram enviados 2 comentários ao artigo
2 comentários não revisados
0 comentários revisados

Usuários :    login / registro

Manuais relacionados
Categorias relacionadas
O autor

Home | Sobre nós | Copyright | Anuncie | Entrar em contato