Atributo Alpha em cores RGB
CSS - Aplicar transparência com o comando 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 RGB 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
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
Autor: Arthur Di Polito
Criação e Diagramação
Gostou dessa dica?
1 Voto(s)
Criação e Diagramação
