CSS
CSS3 – Breve introdução ao RGBA
Normalmente em web trabalhamos com cores na forma de hexadecimal. Agora o RGBA nos permite que você aplique em uma determinada cor transparência.
Por Diego Eis
Introdução ao RGB
Normalmente em web trabalhamos com cores na forma de hexadecimal. É a forma mais comum e mais utilizada desde os primórdios do desenvolvimento web. Mesmo assim, há outros formatos menos comuns que funcionam sem problemas, um destes formatos é o RGB. O RGB são 3 conjuntos de números que começam no 0 e vão até 255 (0% até 100%), onde o primeiro bloco define a quantidade de vermelho (Red), o segundo bloco a quantidade de verde (Green) e o último bloco a quantidade de azul (Blue). A combinação destes números formam todas as cores que você pode imaginar.
No HTML o RGB pode ser usado em qualquer propriedade que tenha a necessidade de cor, como: color, background, border etc. Exemplo:
1 2 3 4 5 | p { background:rgb(255,255,0); padding:10px; font:13px verdana; } |
Este código RGB define que o background o elemento P será amarelo.
Aplicando o RGBA e a diferença da propriedade OPACITY
Até então nós só podíamos escrever cores sólidas, sem nem ao menos escolhermos a opacidade dessa cor. O CSS3 nos trouxe a possibilidade de modificar a opacidade dos elementos via propriedade opacity. Lembrando que quando modificamos a opacidade do elemento, tudo o que está contido nele também fica transparente e não apenas o background ou a cor dele. Veja o exemplo e compare. É aí que entra o RGBA.
O RGBA funciona da mesma forma que o RGB. No caso do RGBA, além dos 3 canais RGB (Red, Green e Blue) há um quarto canal, A (Alpha) que controla a opacidade da cor. Nesse caso, podemos controlar a opacidade da cor de background, borda, color ou qualquer propriedade que contenha cor sem afetar a transparência dos outros elementos:
Veja um exemplo aplicado abaixo:
1 2 3 4 5 | p { background:rgba(255,255,0, 0.5); padding:10px; font:13px verdana; } |
O último valor é referente ao canal Alpha, onde 1 é totalmente visível e 0 é totalmente invisível. No exemplo acima está com uma opacidade de 50%.
Como o Hexadecimal, você não precisa decorar todos estes números. Hoje, qualquer programa gráfico já dá o código do RGB da cor utilizada. O Hexadecimal não foi descontinuado. Se caso você tenha alguma cor que não ficará transparente ou algo do tipo, você pode continuar utilizando hexa e para aqueles que tem transparência, você pode utilizar o RGBA sem problemas.
Veja novamente o exemplo aqui e o código no github do Tableless.
Pingback: CSS3 – Sombras em textos e elementos | Tableless - Desenvolvimento com Padrões Web
Pingback: RGB e HSL | Tableless - Desenvolvimento com Padrões Web