Forgive me, again... + Efeito "Bu".

Hello, my big warriors. ♥

Desculpa, meu inglês é péssimo. E falando em inglês, fiquei de recuperação em matemática e geometria (por enquanto), e por isso vou ter que focar mais nos estudos e ficarei postando menos por esta semana e talvez a metade da próxima. Sem falar que a Semana de Arte Moderna do meu colégio já está chegando, e com isso vem roupas, coreografias, etc, etc... Minha professora disse que precisávamos inventar algo, quem não ajudasse ia perder ponto. Ah, fuck! Pelo menos vai ser sobre o Cazuza. c:

Vocês já ouviram Austin Mahone ou Cher Lloyd? Eu não costumava ouvir mas agora ouço sem parar. Acho que estou começando a virar fã destes dois. E já falando de música (nossa, cara) vocês já ouviram falar de um filme chamado Stay Strong? Me falaram sobre ele faz um tempo, mas eu nunca vi ninguém que tenha assistido ou alguma informação sobre ele. Na época me falaram que se tratava de um filme sobre a vida da diwa Dem(etr)i(a) Lovato. Mudando de assunto...

Como eu já havia dito à vocês, eu tinha feito dois efeitos para postar aqui. Este é o segundo: (Preview). O nome dele é "Bu", e não me perguntem porquê. Foi a primeira coisa que pensei quando terminei ele então não me culpe se o nome não tiver nenhum sentido. Como podem ver, ele dá um certo "giro" no nada. Qualquer semelhança com outro efeito é mera coincidência, sério, fiz ele no CSS3Maker. Clique em "Leia Mais" para aprender. :3

Os Avatares na live preview foram feitos pelo Things To Help You, eu estava novamente com preguiça de fazer. Mas acho (apenas acho) que vou começar a fazer Icons e postar num blog. Já terminei o layout e tudo, vai se chamar Titanium Avatares.

Agora vamos ao efeito. Antes de tudo, cole isto no seu CSS:

.efeitobu { margin: 2px; background: #fff; padding: 2px; border: 2px double #dcdcdc; -webkit-transition-duration: .80s;}

.efeitobu:hover {
-webkit-transition-duration: .80s;
-webkit-animation: cssAnimation 1.504s 17 ease;
-moz-animation: cssAnimation 1.504s 17 ease;
-o-animation: cssAnimation 1.504s 17 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(88deg) scale(1.5) skew(3deg) translate(-141px); }
}

Bom, vamos agora editar isso... Mude o "background: #fff;" pela cor da borda branca (no preview). 

Mude "padding" pela grossura da borda branca.

Por fim, troque "border: 2px double #dcdcdc;" pela grossura e cor da borda dupla (a borda cinzenta no preview).

Agora ponha isso onde quer colocar o efeito:

<a href="LINK" title="TITULO"><img src="URLDAIMAGEM" class="efeitobu"></a>

 Mude apenas o que está em negrito.

Enfim... É só isso. Espero que tenham gostado e se usar, não esqueçam de creditar.

Love Always,

Josh Hofstadter.