Efeito reveal

Bom dia, leitores.

Hoje já é sexta-feira e minhas aulas já voltam nessa segunda, minhas férias passaram muito rápido e eu ainda não saí para lugar nenhum, contrariando aquela famosa frase que o tempo voa quando estamos no divertindo, pois meu recesso passou mais rápido enquanto eu estava entediada. Sério, para vocês terem uma ideia de como está totalmente parado, a  coisa mais diferente que eu fiz foi ir ao inglês ontem. Mas só de pensar que só faltam dois bimestres dá vontade de que o tempo acelere mais e mais até as férias do final do ano e quem sabe avance rápido mais algum tempo até o dia 15 de dezembro, meu aniversário.

Trouxe hoje mais um efeito, o reveal. Na verdade não ia trazê-lo hoje, mas a pedido de uma leitora que no post passado pediu o tutorial de um segundo efeito que havia no blog de previews, resolvi adiantá-lo. É um simples efeito que envolve deslocamento, opacidade e uma bordinha tracejada interna, ou seja uma outline com sua coordenada negativa. Curioso para visualizar logo o efeito? Clique aqui.

----------------------------------------------------------

1. Vá em editar html e acima de ]]></b:skin> cole o código:

.reveal {

transition:All 0.001s ease-out;

-webkit-transition:All 0.001s ease-out;

-moz-transition:All 0.001s ease-out;

transform: rotate(0deg) scale(1) skew(1deg) translate(5px);

-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);

-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(5px);

-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(5px);

filter: hue-rotate(360deg);

opacity:0.3;

filter:alpha(opacity=30);

}

.reveal:hover{

transform: rotate(19deg) scale(1.281) skew(0deg) translate(-11px);

-webkit-transform: rotate(19deg) scale(1.281) skew(0deg) translate(-11px);

-moz-transform: rotate(19deg) scale(1.281) skew(0deg) translate(-11px);

-ms-transform: rotate(19deg) scale(1.281) skew(0deg) translate(-11px);

 -webkit-filter: brightness(1);

-webkit-transition-duration: .80s;

outline-style:dashed;

outline-width:1px;

outline-color: #000;

outline-offset: -3px;

opacity:100;

filter:alpha(opacity=100);}

2. Crie um gadget HTML/Javascript e cole o código:

 <a href="LINK" title="NOME"><img src="URLDAIMAGEM" class="reveal" /></a>

 <a href="LINK" title="NOME"><img src="URLDAIMAGEM" class="reveal" /></a>

 <a href="LINK" title="NOME"><img src="URLDAIMAGEM" class="reveal" /></a>

É só repetir as linhas se quiser mais imagens recebendo este efeito e substituir as partes  indicadas pelo link, nome e url da imagem.