11 5563-9074
Orçamento

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 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
Autor: Arthur Di Polito
Criação e Diagramação