Borda em imagens com efeito opacidade

A Anna, do The Attitude Included me perguntou atravéz do formulário de contato, como eu fiz para pôr borda nas imagens dos afiliados. Mas além de ensinar como pôr borda em imagens, ensinarei junto com este efeito, o efeito opacidade, que uso junto às bordas aqui no blog.

Antes de começar o tutorial, é preciso que vocês saibam que os exemplo que vou usar, é para serem usados na sidebar, mas vocês podem usar este efeito em qualquer lugar do seu blog. Por exemplo, se o efeito for usado na sua área de postagem, troque o .sidebar por .post.

OBS 1: Os valores em porcentagem da opacidade também podem ser modificados até 100%.

OBS 2: Coloque o efeito que escolher dentro do seu css, antes de ]]></b:skin>.

SOLID + OPACIDADE

solid +opacidade

.sidebar img {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
border:3px solid #ff004d;
}

.sidebar  img:hover {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
border:3px solid #575656;
}

DOTTED + OPACIDADE

dotted + opacidade

.sidebar img {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
border:3px dotted #ff004d;
}

.sidebar  img:hover {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
border:3px dotted #575656;
}

DASHED + OPACIDADE

dashed com opacidade

.sidebar img {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
border:3px dashed #ff004d;
}

.sidebar  img:hover {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
border:3px dashed #575656;
}

DASHED COLORIDO + OPACIDADE

dashed color + opacidade

.sidebar img {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
background-color:#575656; border:3px dashed #ff004d;
}

.sidebar  img:hover {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
background-color:#ff004d; border:3px dashed #ff004d;
}

OUTRA FORMA DE USAR O EFEITO

Eu não uso o efeito da forma como expliquei a vocês. Eu uso um código diferente pois a minha sidebar tem muitas imagens, e eu não queria que o efeito funcionasse automaticamente, como acontece da forma que expliquei. Se você tem este mesmo problema, e quer apenas que o efeito funcione em determinados lugares, é o código abaixo que você usará. O efeito exemplo que usei foi o dashed colorido.

Coloque o código abaixo no seu CSS, antes de ]]></b:skin>.


.img1 {
filter:alpha(opacity=82);
 -moz-opacity:0.82;
 opacity:0.82;
background-color:#575656; border:3px dashed #ff004d;
}

.img1:hover  {
filter:alpha(opacity=100);
    -moz-opacity:1.0;
    opacity:1.0;
background-color:#ff004d; border:3px dashed #ff004d;
}

Para fazer o efeito funcionar

Para fazer as bordas aparecerem, basta que você adicione class=’img1′ na sua imagem, como mostra o exemplo abaixo:


<img class='img1' src="http://3.bp.blogspot.com/-0QGG1-qSQlg/TjCi60jDcVI/AAAAAAAAAeM/K_X9m6zHLA4/s1600/afilie-se88x31.png" 
/>

Lembrando que a porcentagem na opacidade pode ser modificado até 100%.

É isso ;)

Bella Felix

facebooktwitterlinkedin

Cursando Design Gráfico, blogueira, pseudo-escritora, viciada em RPG e animes, desenha e devora livros. Autora dos blogs Pink Skull Design e The Black Element.