• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

19 de dezembro de 2012

Efeito Diagonal nas imagens

Tumblr_mf1rorbqyz1r2r1gko1_500_large

Olá gente, 
trouxe um efeito muito legal, achei o tutorial no blog Cute Bii, primeiro quero dizer que a pizza que acabei de comer me deixou mais alegre um pouco pois no dia do meu aniversário, que foi ontem, meu gatinho que eu mais amava morreu, aí de madrugada, ou seja, hoje bem de manhã, nasceu 2 filhotes de uma gata que estava grávida, eles são fofinhos e nasceram prematuros.
Vamos ao tutorial agora, antes de pôr o leia mais, vamos visualizar como fica o efeito?

é só clicar aqui, muito legal o efeito não é?! e o melhor é que podemos escolher a mensagem que quisermos para colocar na imagem, vamos ao tutorial, que é super fácil, mais do que parece.
Primeiro faça a sua imagem, lembrando que cada quadrado deverá ter 152px (sem borda)


Exemplo.:
 

Depois, hospede a imagem em algum local é claro, pode até ser em uma postagem do blog mesmo, agora sim iremos começar a mexer com códigos;
Cole o código abaixo antes de ]]</b:skin> 
Pro height e pro width  meça cada quadrado sem as borda e mude no CSS.

.bem {
02height: 152px;
03width: 152px;
04background: url('LINK_DA_IMAGEM') top left;
05-webkit-transition: 1.5s;
06margin-top: 7px;
07}
08.bem:hover {
09height: 152px;
10width: 152px;
11background: url('LINK_DA_IMAGEM') bottom right;
12-webkit-transition: 1.5s;
13-webkit-box-shadow: inset 0px 0px 20px rgba(50, 50, 50, 1);
14}
Depois, cole o código abaixo em um HTML / javascript:

1<div class="bem"></div>
Simples né?! só exige atenção e fica super legal o resultado :3

2 comentários:

  1. Megan,tem um selinho pro A.N lah no meu blog.ve lá

    http://fantasiesofteen.blogspot.com.br/2012/12/recebemos-um-selo.html

    ResponderExcluir