Avatar dos comentários com efeito hover

 

Yoo ~ \o/
Como vocês estão? Bom, como a Nikki, que agora se chama Neko, não postou hoje, e o blog está um pouco abandonado, eu resolvi postar hoje, ao som da minha music player I could be the one, que é uma música viciante de 7 minutos, baixem eu recomendo. E ainda hoje, eu vou na banca de revista comprar mais um mangá lindo e maravilhoso pra minha coleção. Então, não tem como ficar melhor!!
Neko, se quiser postar amanhã no meu lugar, agradeço! Hoje eu vim atender o último pedido de uma leitora nossa (aleluia o último), é sério eu preciso postar outras coisas, como menus, utilitários e os nossos projetos!!
Então, continuando, nossa querida leitora pediu um tutorial ensinando como colocar os avatares dos comentários com efeito hover. 
Vamos aprender?



Abra seu editor de html, e aperte Ctrl + F ou F3, tanto faz, e procure por: /* Comments
Depois, dentro dessa tag, procure por: .comments .avatar-image-container {
Apague tudo referente ao avatar (código acima) e cole esse código aqui:

.comments .avatar-image-container { /*Imagem da pessoa que comenta*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #e56e70; /*Cor da borda da imagem*/
padding: 1px; /*Grossura da borda da imagem*/
}
.comments .avatar-image-container:hover{ /*Imagem da pessoa que comenta ao passar o mouse*/
max-width: 40px; /*Tamanho da imagem do comentador. */
max-height: 40px; /*Tamanho da imagem do comentador. */
min-height: 40px; /*Tamanho da imagem do comentador. */
min-width: 40px; /*Tamanho da imagem do comentador, repita o mesmo número sempre */
background: #af4896; /*Cor da borda da imagem*/
padding: 2px; /*Grossura da borda da imagem*/
-webkit-animation: cssAnimation 0.1257s 16 ease; /*Não mude nada daqui pra baixo*/
-moz-animation: cssAnimation 0.1257s 16 ease;
-o-animation: cssAnimation 0.1257s 16 ease;
}
@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -webkit-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -moz-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
@-o-keyframes cssAnimation {
from { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
to { -o-transform: rotate(0deg) scale(0.872) skew(1deg) translate(0px); }
}
.comments .avatar-image-container img{
max-width: 40px; /*Tamanho do avatar. */
max-height: 40px; /*Tamanho do avatar. */
min-height: 40px; /*Tamanho do avatar. */
min-width: 40px; /*Tamanho do avatar, repita o mesmo número sempre.*/
}

Recomendo mudar somente isso da sua área de comentários, ou seja, somente o avatar. Vá modificando as cores, as bordas e o tamanho da imagem. Já está tudo explicado. Agora, o mais interessante é que nesse código você, que sabe criar efeitos, pode criar o seu próprio efeito na imagem, mudando a duração, a rotação e etc, isso fica a seu critério.
Gostaram? Espero que sim. Agora, vou ir na banca de revistaaa >u<
Kiss















42 comentários:

  1. Mandi, eu ia postar só mais tarde T3T digamos que estou atarefada tentando organizar o novo lay do meu blog... Não vou trocar agora, só quando eu completar minha meta, e talvez sua também né, de 200 seguidores... Posso postar amanhã sim, já que você já postou hoje kk', quando for assim não se preocupe que se eu não postar logo de manhã, à tarde eu posto.
    Chu~

    ResponderExcluir
    Respostas
    1. ç-ç puxa, eu não sabia :( mas já que você vai postar amanhã, tudo bem. Agora fico mais despreocupada :D

      Excluir
  2. Adorei o tutorial vou usar no meu layout

    ResponderExcluir
  3. Acho que vou reblogar e colocar seus créditos

    ResponderExcluir
  4. Ah, esse efeito é divo, mesmo. OAKSOSK', nunca vi ou testei, u-u Mas deve ser lindo, ♥

    Beijos,

    Juu-Chan do Nescau com Nutella.

    ResponderExcluir
    Respostas
    1. É mesmo, obrigada :D Ohh, é o efeito dos avatares daqui do blog ashuashua

      Excluir
  5. Adoro personalizar os comentários (é um lugar especial), mas quando procuro novos modelos, é difícil pegar um. por isso salvarei esse nos emus favoritos para usa-lo (e abusa-lo kk) depois u.u
    Beijuhs! || † Ieah

    ResponderExcluir
    Respostas
    1. É mesmo, é muito bom e deixa o blog mais bonito! Obrigadaa >U<

      Excluir
  6. Adorei seu Blog muito lindo *--*
    Seguindo aki
    Gostaria de retribuir?
    http://www.garotacomestilo1.blogspot.com.br/

    ResponderExcluir
  7. Adorei o tuto.
    sorvete-de-limao.blogspot.com

    ResponderExcluir
  8. Como conseguiu tantos seguidores???
    http://ideiasdasym.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Isso é macumba Leticia... Nem tente entender u.u
      kkkkkkk
      #zoa

      Excluir
    2. u.u Nossa então vou tentar compriender!!!kkk...

      Excluir
    3. kkkkkkkkkkkk nem eu sei, antes de ontem fui dormir com 118 seguidores, hoje já estou com 133 kkk Oia a Neko zuando ashuashua

      Excluir
    4. nossa sorte de vocês!!!eu dormi com 1 e acordei com 1...sabe o que é pior que isso?esse seguidor sou eu mesma!!!

      Excluir
    5. Ashuashua tenta divulgar mais ele flor :D

      Excluir
  9. Adorei seu Blog muito lindo *--*
    Seguindo aki
    Gostaria de retribuir?
    http://www.garotacomestilo1.blogspot.com.br/

    ResponderExcluir
  10. Posso reblogar no ideias?
    http://ideiasdasym.blogspot.com.br/

    ResponderExcluir
  11. Adoro seus posts Flor *--*
    Te acompanhando sempre <3

    ResponderExcluir
  12. Ah, fica bem legal por um efeito hover no avatar dos comentários. É um detalhe tão pequeno e bobo que chega a dar até um impacto no layout. bezzo, sarah
    http://agd-doce.blogspot.com.br/

    ResponderExcluir
  13. Fico muito bonito os comentes assim. Quando for trocar de layout, acho que usarei esse tuto.

    David - Leitor Compulsivo

    ResponderExcluir
    Respostas
    1. Obrigada, espero que use mesmo >u<

      Excluir
    2. Obrigadaa, espero que use mesmo >u<

      Excluir
  14. nossa sorte de vocês!!!eu dormi com 1 e acordei com 1...sabe o que é pior que isso?esse seguidor sou eu mesma!!!

    ResponderExcluir
    Respostas
    1. kkkkk tenta divulgar mais o seu blog, tipo, aqui mesmo você poderia ter colocado a url do seu blog. Tente visitar os afiliados daqui, ou os blogs que deixam url pelos comentários ;)

      Excluir

Seu comentário é muito importante para o crescimento do blog, mas antes têm algumas regrinhas a serem cumpridas:
♥ Aceitamos pedidos de afiliação, somente se seguir o nosso blog;
♥ Comentários do tipo "seguindo,segue de volta, serão aceitos com prazer, afinal não é pecado pedir para seguirem seu blog, não é mesmo?;
♥ E é claro que eu visito seu blog, afinal é bom conhecermos novos blogs;
♥ Deixe o link do seu blog;
♥ Para mais informações, consulte a nossa FAQ