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.

Transparência com CSS
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:

    

     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.

Vídeo em destaque: Galaxy A52 REVIEW

Analisamos o Galaxy A52 versão de 4G, um smartphone muito bonito, com especificações excelentes que tornam ele um dos, senão o melhor custo benefício até R$ 2200.

Conteúdo relacionado

Samsung Galaxy A52 Review: Melhor custo benefício até R$ 2200?
Smartphones

Samsung Galaxy A52 Review: Melhor custo benefício até R$ 2200?

Analisamos o Galaxy A52 versão de 4G, um smartphone muito bonito, com especificações excelentes que tornam ele um dos, senão o melhor custo benefício até R$ 2200.

Chefe da Ericsson critica proibição sueca do 5G da Huawei
Mercado Tech

Chefe da Ericsson critica proibição sueca do 5G da Huawei

Borje Ekholm diz que a ação contra seu rival prejudica a livre concorrência e o comércio.

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão
Tecnologia

Ericsson comprará Cradlepoint, empresa de rede sem fio dos Estados Unidos, por US $ 1,1 bilhão

Foi anunciado hoje pela Ericsson que a empresa realizou a compra da companhia de redes sem fio dos EUA Cradlepoint. Confira quais são as intenções por trás.

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson
Tecnologia

Claro inaugura a primeira rede 5G DDS do Brasil em parceria com a Ericsson

Claro anuncia hoje a chegada da internet móvel 5G para os seus clientes. Agora você poderá navegar com uma conexão até 12 vezes mais rápida que o 4G!

EUA considera a aquisição da Ericsson na luta contra a Huawei
Mercado Tech

EUA considera a aquisição da Ericsson na luta contra a Huawei

Por mais difícil que seja para os EUA admitirem, o 5G da Huawei é um dos mais sofisticados do mundo. Além disso é mais barato e se não bastasse isso, a empresa também possui mais variedade de equipamentos em seu portfólio.

O Adobe Flash realmente vai morrer desta vez
Tecnologia

O Adobe Flash realmente vai morrer desta vez

Confira o que a Adobe declarou recentemente sobre a sua plataforma Flash, tão utilizada no passado, mas que agora está obsoleta.