31 de jul de 2013

Efeito Janela

Ooi gente mais linda! Como foi o final de férias para vocês? Minhas aulas começaram hoje e só amanhã eu vou super vida loka u-u o que eu acho que é meio atrasado, porque vi várias blogueiras dizendo que suas aulas começaram segunda-feira ou semana passada. Estranho. Mas enfim, hoje eu até traria alguma resenha, atendendo a pedidos, mas sei que como o blog é de estilo variado é melhor intercalar uma postagem mais "útil" e uma mais "intelectual". Preciso terminar o Tráfico de Livros, acreditam que eu achava que ia terminar ano passado? Pois é... Enfim, venho tendo várias ideias de histórias aqui, mas nunca as anoto, e depois vou esquecendo... E sim, eu ainda estou super agitada, não sei o porquê.

Fiz o efeito de hoje para o layout free, mas considerando que nem todos vocês curtem usar lays free, assim como eu, resolvi postar ele aqui no blog. Na verdade eu estava pensando em postar ele antes de postar o layout, mas acabei invertendo e enrolando, vindo a postá-lo só agora. Não sei se já existe esse efeito, como cada um dá um nome a um efeito, é difícil localizar, mas eu fiz com ajuda do CSSMaker e só dele. Se quiser ver o efeito, vá nesse blog, no gadget "Efeito Janela". O nome? Porque eu achei que ele no hover parece uma janela, simples assim.

Para usá-lo, cole acima de ]]></b:skin>
.janela {
-webkit-filter:grayscale(1);
padding: 1px;
border: 1px solid #D2D1CE; /* Borda */
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
}
.janela:hover {
-webkit-filter:grayscale(0);
transform: scale(0.84, 0.84);
-webkit-transform: scale(0.84, 0.84);
-moz-transform: scale(0.84, 0.84);
-o-transform: scale(0.84, 0.84);
-ms-transform: scale(0.84, 0.84);
padding: 7px;
margin: -6px;
border: 1px solid #748497; /* Borda no hover */
background: #fff; /* Fundo no hover */
transition:All 1s ease;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
}

Para usar, cole num gadget de HTML/JavaScript:

<a href="LINK" title="NOME"><img src="URL DA IMAGEM" class="janela" /></a>
<a href="LINK" title="NOME"><img src="URL DA IMAGEM" class="janela" /></a>
<a href="LINK" title="NOME"><img src="URL DA IMAGEM" class="janela" /></a>
<a href="LINK" title="NOME"><img src="URL DA IMAGEM" class="janela" /></a>
E vá repetindo conforme precisar, o código é bem explicativo.

Espero que tenham gostado, não repassem e creditem, por favor *-*

Até mais, fiquem com Deus!

10 comentários:

  1. Adorei o efeito, ótimo para botar em imagens de afiliação mesmo!

    Seguindo! Retribui? Pequena Senhorita ♥ |

    ResponderExcluir
  2. Legal esse efeito! Gostei! E eu nunca tinha visto, fica umas bordinhas nas imagens quando passa o mouse, legal.

    xx,
    www.likeparadise.com.br

    ResponderExcluir
  3. Ammmmei o efeito >w<
    Tem um selinho no blog:http://mygoodies1.blogspot.com.br/2013/08/selinho.html
    Caso não aceitar,é só avisar :)

    ResponderExcluir
  4. Lindo efeito, adorei o post!
    www.espacegirl.com

    ResponderExcluir
  5. qee show esse efeitooo ameii
    adotadospelopai.com.br/

    ResponderExcluir
  6. Oi lebra de mim, eu sou a dona do blog Teen World, eu tinha fechado o blog mais voltei com ele, o blog mudou de link, agora o link é
    cereja-negra.blogspot.com.br
    Assim que mudar me avise

    ResponderExcluir
  7. Adorei o tutorial,muito legal.Tem tag pra vc lá no blog,bjs
    Minha Mãe Me Ensinou

    ResponderExcluir
  8. O efeito é lindo *u* Ótimo tutorial ;3
    Bjss *w*

    http://sweetdreamsoficial.blogspot.com.br/

    ResponderExcluir
  9. O efeito fica lindo *-*

    Fiquei seguindo,
    http://fashionteens-ft.blogspot.pt/

    ResponderExcluir

Obrigada por ler e comentar!
Deixe o link do seu blog (ou seu perfil aberto) para que eu possa retribuir. Não gosto muito de responder dúvidas via comentários, então prefiro que você mande na ask ali ao lado ->
Comentários de divulgação sem nada sobre o post não serão retribuidos. Fale pelo menos um pouquinho sobre o post, por favor.
Faça aos outros aquilo que você quer que façam para você.