Hoje venho trazer um tutorial de como trabalhar com transparência no CSS...

Antigamente sempre para criarmos algum efeito de transparência em algum elemento era necessário o uso de imagens com uma opacidade menor, porém agora existe a propriedade rgba que nos auxilia com isso...
o rgba é um derivado do antigo rgb e tem a funcionalidade parecida também...

r = Red = Vermelho = É a quantidade de vermelho que é adicionado ao elemento.
g = Green = Verde = É a quantidade de verde que é adicionado ao elemento.
b = Blue = Azul = É a quantidade de azul que é adicionado ao elemento.
a = Alpha = Transparência = É a opacidade deste elemento.

(no caso das cores é só lembrar dos tempos de infância quando você misturava duas cores para fazer outra cor diferente)

Um exemplo seria um quadrado como o criado abaixo:

Código:

<div class="quadrado"></div>

Código:


.quadrado{
 background-color: rgba(0, 0, 0, 0.7);
}


Esse código cria um quadrado preto com 70% de opacidade.

Você pode testar este código neste site

Explicando melhor o código:


Leia mais sobre rgba
http://www.w3schools.com/cssref/css_colors_legal.asp

Obrigado por compartilhar, informação útil com certeza  

Com certeza essa informação vai ajudar muitos usuários. Curtido!

Bem explicado, guardarei em meus arquivos de backups!

Obrigado,

JS