menu-inline

Opacidade com CSS e imagens

  • 04 dezembro 2011 por Luiz Henrique Kuchnir
Neste tutorial vamos aprender a manipular a opacidade de elementos html, utilizando a propriedade opacity das CSS3, e uma versão alternativa, em que utilizaremos um plano de fundo semitransparente.
Mãos à obra!

Propriedade Opacity - CSS:


Resultado:

css opacity


HTML:
<div id="prim">
</div>
<div id="seg">
</div>

CSS:
#prim {
width:100px;
height:100px;
background:red;
opacity:0.5;
filter:alpha(opacity=50);

}
#seg {
width:100px;
height:100px;
background:red;
}
As duas declarações em azul determinam 50% de transparência para a div prim, sendo, filter:alpha usada para IE8 ou anteriores e opacity usada pelos demais navegadores.

Como perguntado nos comentários, se houver conteúdo dentro da div prim, ele também ficará transparente. Para evitar que isso aconteça podemos usar a solução tratada abaixo.

Opacidade com png:


Resultado:

opacity png


HTML:
<div id="container">
    <p>
        Este quadrado está 50% transparente, mas este texto não.
    </p>
</div>

CSS:
#container {
width:200px;
height:200px;
background-image:url("background_normal.jpg");
}
#container p {
margin:20px;
padding:20px;
background:url("background_semitransparente.png" repeat);
}

Nesta segunda solução utilizamos uma imagem com 50% de transparência, feita em um editor de imagens e salvo no formato .png.
A div container contém uma imagem de fundo para dar destaque à transparência do elemento p.
O elemento p não dever conter cor de fundo.

Extra - Transparência em menus:


Utilizando a propriedade opacity podemos dar um efeito interessante aos menus.
Tomando como base o nosso menu com imagens ao lado dos links, procure o seguinte trecho e acrescente a parte em azul:

ul#menuvert li a {

... resto do código ...

opacity:.6;
filter:alpha(opacity=60);

}


Faça a mesma coisa com o seguinte trecho:

ul#menuvert li a:hover {

... resto do código ...

opacity:.1;
filter:alpha(opacity=100);

}

Salve e veja diferença. Qualquer dúvida poste nos comentários ou entre em contato.
Até mais!

Comentários 0 comentários