24/11/2016

Links semi-transparentes


Ohayooo bunnie's! Como estão vocês hoje? Venho trazer um tutorial para personalizar links em geral do blog, mas para a explicação vou usar na sidebar. O efeito deixa os links ou um link semi-transparente. Fica muito bonito dependendo de onde for colocar,  espero que gostem do tutorial! Os créditos vão para o blog Chá com Anjos, enfim é isso. 

Aplicando transparência em links na sidebar: 

1. Vá no HTML do seu blog, aperte CTRL+F e procure por ]]></b:skin>, acima dele cole:

Códigos
.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;
}

 2. 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 do código anterior que você colocou no HTML:

Códigos
.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:

Códigos
 <p class="transparente-text">ESCREVA SEU TEXTO AQUI.</p>

Para usar link e texto ao mesmo tempo:

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

Nenhum comentário:

Postar um comentário

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345