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:
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;
}
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"><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;
}
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;
}
Códigos
<p class="transparente-text">ESCREVA SEU TEXTO AQUI.</p>
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>
<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