28 de ago. de 2012

Tutorial: Imagens Arredondadas no Hover


Oii galerinha lindiah, tudo bem?!? Hoje é a titia Thursday que está postando, e como sempre, atendendo os adoráveis pedidos. Dessa vez, a querida Eduarda, pediu o tutorial das imagens que a Ninha aplicou no layout atual. Seu desejo é uma ordem lindiah, vamos começar?!

Vá em:


Desing ~> Editar HTML ~> Dê um Ctrl+F ou F3 e procure por:

 ]]><b:skin>

Logo antes dessa tag, cole o seguinte código:

.post img {
-webkit-transition-duration: .50s;
border-radius: 10px 10px 10px 10px;
}
.post img:hover {
-webkit-transition-duration: .50s;
border-radius: 200px 200px 200px 200px;
}


Se você quiser igual, idêntico o daqui, sua jornada acabou. Mas, se você quiser diminuir ou aumentar alguma coisa, continue...
Aonde está sublinhado:

border-radius: 10px 10px 10px 10px;


border-radius: 200px 200px 200px 200px;


É aonde você vai trocar os números. O 10 é quando a imagem está normal, sem passar o mouse. O 200 é quando passa o mouse.
Quanto maior número, maior arredondamento, quanto menor o número, menor o arredondamento. 

Créditos:

Fácil não?!

Por hoje é só lindos e lindas, até uma próxima(tipo, quinta-feira).

6 comentários:

  1. Já usando efeito super lindo,valeuuuu...
    BeijOkas


    http://compatilhandocom.blogspot.com.br/

    ResponderExcluir
  2. Owww obrigaduuu, muito obrigado mesmo, amo esse efeito x3

    ResponderExcluir
  3. Gostei do tutorial
    muito legall

    http://manguitarosa.blogspot.com.br/

    beijoos

    ResponderExcluir
  4. O efeito fica bem legal ;)
    bjs
    Balaio de Sonhos (link no perfil)

    ResponderExcluir
  5. O efeito fica mesmo super bonito :)
    Aqui é lindo viu? Parabéns ^^
    blog-part-of-me.blogspot.com

    ResponderExcluir

Olá, aqui temos uma Mini F.a.q pra te auxiliar:

-Não aceitamos Tags e Selinhos
-Precisa de uma Postagem? Pode comentar :)
-Afiliação? Somente na página sobre como se afiliar. Pedidos nos comentários serão desconsiderados
-Por favor, sem xingamentos para o bem de todos
-Nunca deixe a URL do seu blog no final do comentário, o blogger considera isso SPAN e exclui seu blog :(
-Por favor não plageie.
Mais alguma pergunta? Comente aqui ou Leia nossa F.a.q completa

Obrigada