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:
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
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);
}
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
Última edição por Wagner' em Sex 13 Set 2013, 4:13 pm, editado 1 vez(es)