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.
Veja um preview aqui.
1- Vá no HTML do seu blog, aperte CTRL+F e procure por:
]]></b:skin>
2- Acima disso, cole:
.transparente a {3- Quando quiser usar os links transparentes, cole em um Gadget de HTML/Javascript
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;
}
<div class="transparente">Aplicando transparência em textos na sidebar:
<a href="SEU-LINK-AQUI">LINK</a></div>
Cole o código a seguir abaixo da "class" que você criou no passo 2 do inicio do tutorial.
.transparente-text {Quando dor usar textos com opacidade use o seguinte código:
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;
}
<p class="transparente-text">Para usar link e texto ao mesmo tempo:
ESCREVA SEU TEXTO AQUI.</p>
<div class="transparente">
<a href="SEU-LINK-AQUI">Nome do Link</a>
<p class="transparente-text">
ESCREVA SEU TEXTO AQUI.</p>
</div></div>
Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar
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 *-*
ResponderExcluirhttp://wdocefuturo.blogspot.com.br/
Obrigada ^^
Excluir