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;
}
-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;
e
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).
Já usando efeito super lindo,valeuuuu...
ResponderExcluirBeijOkas
http://compatilhandocom.blogspot.com.br/
Acho que fica bem bonito, talvez use (:
ResponderExcluir⇨ Yoru No Niji
Owww obrigaduuu, muito obrigado mesmo, amo esse efeito x3
ResponderExcluirGostei do tutorial
ResponderExcluirmuito legall
http://manguitarosa.blogspot.com.br/
beijoos
O efeito fica bem legal ;)
ResponderExcluirbjs
Balaio de Sonhos (link no perfil)
O efeito fica mesmo super bonito :)
ResponderExcluirAqui é lindo viu? Parabéns ^^
blog-part-of-me.blogspot.com