quinta-feira, 10 de maio de 2012

Tutorial - Efeito Hover nas Imagens

Tumblr_ljfzrgn1ne1qhbwoz_large 

Oi meus morangos com caramelos rosa, sabe essa coisa que quando voce passa o mouse a imagem
fica da cor normal então . Meu primeiro post vai ser com uma coisa muito
utilitaria e avisando que vale a pena viu? Vamos ver esse tutorial 

1. Vá em Blogger > Design > Editar HTML.
2. Tecle Ctrl+F e procure por:

]]></b:skin>

3. Logo acima desse tag, coloque o seguinte código:

.main img {
-moz-border-radius: 03px;
-webkit-border-radius: 0px 30px 0px 30px; */ Bordas arredondadas */
-webkit-transition-duration: .70s; */ Efeito fade */
}

.main img:hover {
-moz-border-radius: 03px;
-webkit-border-radius: 30px 0px 30px 0px; */ Bordas arredondadas hover */
-webkit-transition-duration: .70s; */ Efeito fade */
}

4. Se quiser edite  de acordo com as partes  em negrito em verde.
5. Visualize e se tiver tudo em ordem Salve.

Um comentário:

  1. mais você vai reblogar ou usar?, se for reblogar não pode mais usar sim ^-^, com créditos >.<

    http://extras-for-you.blogspot.com.br/

    ResponderExcluir