Incluir Efeito Opacity em Links e Textos no blog

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn

Atendendo ao pedido feito por @Cafedolivro, vou mostrar,neste artigo,como aplicar um efeito transparente em links ou textos na sidebar do blog.
Você já viu, neste post que a propriedade Opacity permite que você aplique níveis de transparência a uma imagem e agora verá a possibilidade de aplicação de transparências em outros elementos, como links e textos.

A primeira coisa que devemos fazer é criarmos uma “class” e aplicar estilos a esta class , para que ela possa ser incorporada ao template e ser adicionada diretamente ao elemento sempre que quisermos utilizá-la.
No nosso exemplo, vamos criar uma “class” e nomeá-la de “transparente“.
Vejamos:

1. Aplicando transparência em links na sidebar:

Vá no menu “modelo >> Editar HTML” , não precisa clicar em “Expandir modelos de widgets”,e acrescente uma nova ‘class‘ ANTES da tag ]]></b:skin>

.transparente a {
font-size:XXpx; /*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: XXpx; /*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;
}

Quando quisermos mostrar a “class transparente”, devemos acrescentar uma condicional no local onde queremos que o efeito se aplique.
Por exemplo, se você quer aplicar o efeito em um link na sidebar, vá até o menu “layout”, clique em “adicionar gadget”, escolha a opção “html/javascript” e cole esse código:

<div class="transparente">
<a href="SEU-LINK-AQUI">LINK</a></div>

Sempre que quiser aplicar o efeito opacity em links será necessário colar este código.

2. Aplicando transparência em textos na sidebar:

Cole este código bem ABAIXO da “class” que você já criou anteriormente:

.transparente-text {
font-size:XXpx; /*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 for utlizar o efeito opacity em textos utilize esse código:

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

 

Veja como fica o código para aplicação do efeito em link e texto ao mesmo tempo:

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

DEMO
(Confira o item na sidebar “Efeito Opacity)

• Facebook
• WhatsApp
• Twitter
• Pinterest
• LinkedIn