Efeito outline

Okaeri :)

Este tutorial tem sido bastante propagado nos blogs atuais: o efeito outline. Não sei se o blog Having Cherry, de onde o adaptei, foi o primeiro a criá-lo, mas foi daí que tirei, portanto cá estão os créditos - embora eu tenha alterado bastante, principalmente em termos de filtros, opacidade, cores e organização. É simples, consiste apenas numa imagem com borda e outline, onde ao passar o mouse a outline se junta à borda e a imagem ganha opacidade. Fiz ainda uma outra versão, onde acontece o contrário: a outline junta-se até desaparecer.

Imagens tiradas daqui: www

Prévia das duas versões:

• Versão 1: www
• Versão 2: www

Tutorial 1:

Procure por:

/b:skin

Acima cole:

.outline1 {
opacity: 1;
outline: 2px solid #f0d8bb;
outline-offset: -13px;
border: 3px solid #deb1c1;
box-shadow: inset 0px 0px 3px #cfa3b2, 0px 1px 1px #ebcea9;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
 -o-transition: all 2s ease;
transition: all 2s ease;
}
.outline1:hover {
opacity: 0.8;
outline: 2px solid #e6cfd6;
outline-offset: -5px;
border: 3px solid #ebcea9;
box-shadow: inset 0px 0px 3px #dbbe9a, 0px 1px 1px #deb1c1;
-webkit-filter: contrast(70%);
-moz-filter: contrast (70%);
-o-filter: contrast(70%);
-ms-filter: contrast(70%);
filter: contrast(70%);
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Tutorial 2:

Procure por:

/b:skin

Acima acrescente:

.outline2 {
opacity: 1;
outline: 2px solid #ebcccf;
outline-offset: -13px;
border: 3px solid #bdc2c9;
box-shadow: inset 0px 0px 3px #a3acb8, 0px 1px 1px #e6b8bb;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
 -o-transition: all 2s ease;
transition: all 2s ease;
}
.outline2:hover {
opacity: 0.8;
outline: 2px solid transparent;
outline-offset: -200px;
border: 3px solid #e6b8bb;
box-shadow: inset 0px 0px 3px #e8a2a8, 0px 1px 1px #bdc2c9;
-webkit-filter: contrast(70%);
-moz-filter: contrast (70%);
-o-filter: contrast(70%);
-ms-filter: contrast(70%);
filter: contrast(70%);
-webkit-transition: All 1s ease;
-moz-transition: All 1s ease;
-o-transition: All 1s ease;
}

Aplicação:

Para aplicar, basta adicionar um gadget HTML/Javascript com o código habitual, onde você tem de trocar a url da imagem e, se quiser, colocar um link. À frente da class, onde diz outline, está a ver o número? Troque pelo número da versão que você escolheu usar.

<img src="URL" class="outline1" />

Voilá!