Oficina da Net

Subscreva nosso RSS - Assine o RSS e receba as novidades do site em seu leitor.

Transparência com CSS

Publicado em: 20/02/2008 | CSS | Visualizações: 2.029 | 3 Comentário(s)

Olá caro leitor,
hoje irei demonstrar como se faz transparência utilizando CSS, uma ferramenta muito útil se você quer fazer um site com alguns efeitos, é muito fácil de entender e utilizar.

Digamos que teremos uma imagem ao fundo de nosso site e gostariamos de fazer um objeto com texto sobreposto e este por sua vez devendo ser com trasparência de 65%. Bom vou exemplificar o que falei com a imagem abaixo:

Este será o resultado de nossa matéria.

Segue o código HTML que utilizaremos:

<div class="img">

     <div class="transp">

    	Coloque o texto que você desejar aqui

    </div>

</div>

Agora o código CSS que utilizaremos:



.img { 

    width:380px; 

    height:280px; 

    float:left; 

    padding:10px; 

    background-image:url(img.jpg); 

    background-repeat:no-repeat; 

}

.transp { 

    filter:alpha(opacity=65);

    -moz-opacity:.65;

    opacity:.65; 

    width:360px;

    height:260px; 

    float:left; 

    background-color:#FFFFFF;

    font-family:"Trebuchet MS", arial, verdana;

    font-size:11px;

    padding:10px;

    text-align:justify;

}

Lembrando que este código css é utilizado para formatar toda a página, e o código que faz a "mágica" de transparência é:

filter:alpha(opacity=65);

-moz-opacity:.65;

opacity:.65;

Bom pessoal segue em anexo todo o exemplo acima citado, divirtam-se com as transparências e expero ter ajudado quem precisa. Ah, dúvidas, ou sugestões? comentem abaixo.

Arquivo anexo: Clique aqui para download

compartilhe