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]