Transparência com CSS

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.

Por | @nmuller99 Programação
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:

Transparência com CSS
Este será o resultado de nossa matéria.

Segue o código HTML que utilizaremos:

    

     Coloque o texto que você desejar aqui
    



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.

Mais sobre: css
Share Tweet
DESTAQUESRecomendadoMais compartilhados
Comentários
  • ASSINE NOSSA NEWSLETTER

    As melhores publicações no
    seu e-mail

  • Preencha para confirmar