RGBA

Antes definíamos as cores em CSS das seguintes formas:

• color: red;
• color: #ff0000;
• color: rgb(255,0,0);
• color: rgb(100%,0%,0%);

Com o CSS3 o já conhecido modelo de cores RGB foi extendido nesta especificação para incluir “alfa” e permitir a especificação da opacidade de uma cor.

Ao contrário de valores RGB, não há a notação hexadecimal para um valor de RGBA.

O formato de um valor RGBA na notação funcional é ‘RGBA (“seguido por uma lista separada por vírgula de três valores numéricos (ou três valores inteiros ou três valores percentuais), seguido por um ).
O valor inteiro de 255 corresponde a 100%. Exemplo: RGBA (255,255,255,0.8) = RGBA (100%, 100%, 100%, 0.8).

O valor da opacidade varia entre 0.1 e 1, sendo o último valor equivalente a nenhuma opacidade. O que antes era feito apenas usando imagens agora é totalmente possível de uma forma muito simples!

O RGBA pode ser usado como um valor em quaisquer propriedades que aceitem cor. Alguns exemplos Por exemplo:

• background-color
• border-color
• color

Já vamos ver um exemplo do seu uso.

Exemplos

• RGBA com opacidade de 50%

#RGBA {
width: 200px;
height: 100px;
background: rgba(0,0,255,0.5); /*RGBA com opacidade de 50%*/
}

• Usando o RBGA com porcentagem

#RGBA {
width: 200px;
height: 100px;
background: rgba(0%,0%,100%,0.3); /*RGBA com porcentagem e opacidade de 30%*/
}

Funciona no:

Outros exemplos

• Mesclando o RGBA com outras propriedades!

#RGBA {
font-size: 18px;
color: rgba(7, 206, 250, 0.5);
text-shadow: 18px 0px 0 #ad0918; /*usando o text-shadow*/
}

Seja Criativo!

• Com a novidade do RGBA vai ficar:

#RGBA {
width: 200px;
height: 100px;
background: rgba(0,0,255,0.7);
box-shadow: 10px 10px 5px rgba(0,0,255,0.3); /*usando o RGBA com box-shadow*/
}

Funciona no:

Compartilhe