WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Atributo Alpha em cores RGB

Publicidade

Criando transparências com o comando Alpha no sistema de cor RGB

Informação:
Desde o início do CSS, o sistema de representação de cores podia ser especificado utilizando determinados parâmetros: nome da cor (red), hexadecimal (#FF0000) e RGB (255, 0, 0 ou 100%, 0%, 0%).

Com a chegada do CSS3, um novo atributo foi integrado ao sistema RGB: a (ou Alpha), o qual é utilizado para determinar a opacidade da cor a ser representada sem interfirir na opacidade de outros objetos.

Neste artigos daremos alguns exemplos de como determinar a cor de uma div utilizando o o atributo Alpha.

Obs: Vale lembrar que essa função CSS3 funciona apenas nos navegadores Internet Explorer 9, Google Chrome, Mozila Firefox (3.1 ou superior) e Safari. Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos CSS3.

Vejamos alguns exemplos:

<style>.rgba {     background: rgba(0,0,255,0.5);}</style>

Onde:
-
O primeiro número representa o tom de vermelho (de 0 a 255 ou de 0 a 100%);
- O segundo número representa o tom de verde (de 0 a 255 ou de 0 a 100%);
O terceiro número representa o tom de azul (de 0 a 255 ou de 0 a 100%);
- O quarto número representa o índice de opacidade da cor (de 0.1 a 1)

Abaixo alguns exemplos de utilização

<style>.vermelho1{width:300px;height:300px;background: rgba(255,0,0,0.1);}.vermelho2{width:300px;height:300px;background: rgba(255,0,0,0.3);}.vermelho3{width:300px;height:300px;background: rgba(255,0,0,0.5);}.vermelho4{width:300px;height:300px;background: rgba(255,0,0,0.7);}.vermelho5{width:300px;height:300px;background: rgba(255,0,0,0.9);}</style>

Veja o Resultado:

Teste
Teste
Teste
Teste
Teste

Utilizando a propriedade RGBA, podemos ir mais além integrando outras propriedades, como o BOX-SHADOW.

Vejamos o exemplo:

<style>.azul{   width: 200px;   height: 100px;   background: rgba(0,0,255,0.5);   -webkit-box-shadow: 10px 10px 5px rgba(0,0,255,0.3);   -moz-box-shadow: 10px 10px 5px rgba(0,0,255,0.3);   box-shadow: 10px 10px 5px rgba(0,0,255,0.3);}.verde{   width: 200px;   height: 100px;   background: rgba(0,255,0,0.5);   -webkit-box-shadow: 10px 10px 5px rgba(0,255,0,0.2);   -moz-box-shadow: 10px 10px 5px rgba(0,255,0,0.2);   box-shadow: 10px 10px 5px rgba(0,255,0,0.2);}</style>

Veja o Resultado:

Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]