[CSS] Trabalhando com transparencia
4 participantes
Página 1 de 1
[CSS] Trabalhando com transparencia
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)
Re: [CSS] Trabalhando com transparencia
Obrigado por compartilhar, informação útil com certeza
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Re: [CSS] Trabalhando com transparencia
Com certeza essa informação vai ajudar muitos usuários. Curtido!
Re: [CSS] Trabalhando com transparencia
Bem explicado, guardarei em meus arquivos de backups!
Obrigado,
JS
Obrigado,
JS
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos