Transparência em DIV's
CSS - Aplicar transparência em div's com CSS de forma simplesInformação:
Neste artigos daremos alguns exemplos de como criar divs com transparência através de comandos do próprio CSS sem a necessidade de uma imagem de fundo.
Obs: Vale lembrar que essa função CSS3 funciona apenas nos navegadores Internet Explorer 9, Google Chrome, Mozila Firefox (3.1 ou superior) e Safari. Cada um desses navegadores precisará de um prefixo para que funcione, lembrando que esse prefixo será temporário até que o W3C valide os comandos CSS3.
Lista com prefixo de cada navegador
Google Chrome e Safari: -webkit-
Mozilla Firefox: -moz-
Internet Explorer: -ms-
Opera: -o-
Vejamos alguns exemplos:
<style>
.transparencia {
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
}
</style>
Onde:
- Filter: Indica qual o tipo de transparência utilizado;
- (Opacity=x): Indica o nível de transparência da div (de 0 a 100);
- Opacity: Indica ao navegador o nível de transparência a ser identificado (de 0 a 1.0).
Abaixo alguns exemplos de utilização
<style>
.transparencia1 {
filter: alpha(opacity=10);
opacity: 0.1;
-moz-opacity: 0.1;
-webkit-opacity: 0.1;
}
.transparencia2 {
filter: alpha(opacity=30);
opacity: 0.3;
-moz-opacity: 0.3;
-webkit-opacity: 0.3;
}
.transparencia3 {
filter: alpha(opacity=50);
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
}
.transparencia4 {
filter: alpha(opacity=70);
opacity: 0.7;
-moz-opacity: 0.7;
-webkit-opacity: 0.7;
}
</style>
Veja o Resultado:
Criação e Diagramação
