WebCis - Serviços de criação sites, marketing digital e sistemas web.

SIGA-NOS
Solicite um orçamento

Dicas para Criação e de sites

Transparência em DIV's

Publicidade

Criando DIV's com transparência com CSS

Informaçã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:

Texto
Texto
Texto
Texto
Publicidade
Postado por: Arthur Di Polito
Criação e Diagramação

Assine nosso feeds e receba notícias todas semanas

Últimos Clientes

[veja todos]