Como deixar as coisas transparentes com CSS 3 - Parte 2 | Kauamanga Blog

Como deixar as coisas transparentes com CSS 3 - Parte 2

sábado, setembro 6, 2008 12:46

Postado em CSS, Desenvolvimento, Internet, Programação/Script

/* Por algum motivo é necessario entrar no Post para funcionar */

Continuando o assunto(Primeira parte aqui), agora vamos fazer mudar a opacidade

Passe o Mouse

Certo, esse daqui foi feito com o onmouseover e onmouseout (javascript)

<style type="text/css">
.div-exemplo{
   width: 250px;
   padding: 5px;
   background-color: #66ccff;
   margin: 0 auto;
   border: 1px solid gray;
}
.div-opacity{
   width: 240px;
   height: 131px;
   margin: 0 auto;
   background: transparent url() no-repeat center;
   color: white;
}
.trans{ /*Classe com 50% de Opacidade*/
opacity: 0.5;
}
.nTrans{ /*Classe com 100% de Opacidade*/
opacity: 1.0
}

</style>
<div class="div-exemplo">
<p style="text-align: center;">Passe o Mouse :D</p>
<div class="div-opacity"><img alt="Firefox no Espaco" class="trans" onmouseout=’this.className = "nTrans"’ onmouseover="this.className = ‘trans’" src="http://farm4.static.flickr.com/3009/2832169826_5442dff26d_m.jpg"></div>
</div>

Certo, agora vamos fazer isso com CSS puro

Passe o Mouse e Clique

<style type="text/css">
.div-exemplo{
   width: 250px;
   padding: 5px;
   background-color: #66ccff;
   margin: 0 auto;
   border: 1px solid gray;
}
.div-opacity{
   width: 240px;
   height: 131px;
   margin: 0 auto;
   background: transparent url() no-repeat center;
   color: white;
}
.transCSS{ /* Classe com 100% de opacidade */
   opacity: 1.0;
}
.transCSS:Hover{ /* Quando o mouse passa encima muda pra 50% */
   opacity: 0.5;
}
.transCSS:Active{ /* Quando se clica muda pra 10% */
   opacity: 0.1;
}

</style>
<div class="div-exemplo">
<p style="text-align: center;">Passe o Mouse(2) :D</p>
<div class="div-opacity"><img src="http://farm4.static.flickr.com/3009/2832169826_5442dff26d_m.jpg" class="transCSS" alt="Firefox no Espaco" /></div>
</div>