7 de set de 2012

Efeito opacidade em links e textos


Oi pessoal! Hoje vou ensinar a aplicar transparencia nos links e textos. Eu aprendi no Mundo Blogger e estou passando para vocês.
Veja um preview aqui.
Aplicando transparência em links na sidebar: 

1- Vá no HTML do seu blog, aperte CTRL+F e procure por:

]]></b:skin>
2- Acima disso, cole:

.transparente a {
font-size: Xpx; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}
.transparente a:hover {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:1);
KHTMLOpacity: 1;
MozOpacity: 1;
-khtml-opacity:.1;
-ms-filter:"alpha(opacity=100)";
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
 3- Quando quiser usar os links transparentes, cole em um Gadget de HTML/Javascript


<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a></div>
Aplicando transparência em textos na sidebar: 

Cole o código a seguir abaixo da "class" que você criou no passo 2 do inicio do tutorial.


.transparente-text {
font-size: px; /*Coloque tamanho da fonte se quiser*/
color:XXX;  /*Coloque cor da fonte se quiser*/
text-decoration: none;
filter: alpha(opacity:0.4);
KHTMLOpacity: 0.4;
MozOpacity: 0.4;
-khtml-opacity:.40;
-ms-filter:"alpha(opacity=40)";
-moz-opacity:.40;
filter:alpha(opacity=40);
opacity:.40;
}
Quando dor usar textos com opacidade use o seguinte código:

 <p class="transparente-text">
ESCREVA SEU TEXTO AQUI.</p>
Para usar link e texto ao mesmo tempo:

 <div class="transparente">
<a href="SEU-LINK-AQUI">Nome do Link</a>
<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.</p>
</div></div>

2 comentários:

  1. Que legal esse tutorial, eu não sabia como fazia isso nos textos... bem interessante e vai me ajudar muito futuramente! Bem legal seu blog viu *-*

    http://wdocefuturo.blogspot.com.br/

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!