Introdução rápida ao formato RGBA, introduzido no CSS3

AGRADEÇA AO AUTOR COMPARTILHE!

O RGBA não é exatamente uma propriedade existente no CSS3 como muitos dizem, mas sim, um novo modelo de cores introduzido no CSS3.

Assim como no modelo RGB, temos a seguinte correspondência:

  • R: Red
  • G: Green
  • B: Blue

Para o RGBA existe também o A, ou alfa, que permite mencionar a opacidade de uma cor. Isso permite que o desenvolvedor tenha em mãos uma grande quantidade de cores diferentes e maior flexibilidade na criação de projetos web.

Para obter a cor red, precisaríamos da gama rgb(255,0,0) ou rgb(100%, 0%,0%). Caso você queria adicionar uma opacidade de 50% à essa cor, utilizaria o código abaixo:

[sourcecode language=”html”]
.colorred_50{
color: rgba(255,0,0,0.5)
}
[/sourcecode]

ou

[sourcecode language=”html”]
.colorred_50{
color: rgba(100%,0%,0%,0.5)
}
[/sourcecode]

O efeito visual para o código acima segue abaixo:

A opacidade varia de 0 à 1.

Essa propriedade funciona em:

Fácil e muito funcional, não?!

Retirado de Eu Faço Programas

AGRADEÇA AO AUTOR COMPARTILHE!

Gabii Fonseca

Mais artigos deste autor »

Gabriella Fonseca Ribeiro tem 21 anos e cursa Sistemas de Informação. Trabalha com desenvolvimento, pesquisa e otimização de websites - SEO, marketing digital, redes sociais e comunicação interativa. || www.eufacoprogramas.com


1 Comentários

Deixe seu comentário

Seu endereço de e-mail não será publicado. Campos com * são obrigatórios!

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">