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
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.
ResponderExcluirChu~
ç-ç puxa, eu não sabia :( mas já que você vai postar amanhã, tudo bem. Agora fico mais despreocupada :D
ExcluirAdorei o tutorial vou usar no meu layout
ResponderExcluirObrigada >U<
ExcluirObrigadaa ^u^
ExcluirObrigada ^u^
ExcluirAcho que vou reblogar e colocar seus créditos
ResponderExcluirObrigada, fico feliz por fazer isso :D
ExcluirAh, esse efeito é divo, mesmo. OAKSOSK', nunca vi ou testei, u-u Mas deve ser lindo, ♥
ResponderExcluirBeijos,
Juu-Chan do Nescau com Nutella.
É mesmo, obrigada :D Ohh, é o efeito dos avatares daqui do blog ashuashua
ExcluirAdoro 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
ResponderExcluirBeijuhs! || † Ieah
É mesmo, é muito bom e deixa o blog mais bonito! Obrigadaa >U<
ExcluirCurti o tuto demais XD
ResponderExcluir-kissus-
Obrigadaa >u<
ExcluirAdorei seu Blog muito lindo *--*
ResponderExcluirSeguindo aki
Gostaria de retribuir?
http://www.garotacomestilo1.blogspot.com.br/
Obrigada >u< sigo sim!!
ExcluirAdorei o tuto.
ResponderExcluirsorvete-de-limao.blogspot.com
Obrigadaa ^u^
ExcluirComo conseguiu tantos seguidores???
ResponderExcluirhttp://ideiasdasym.blogspot.com.br/
Isso é macumba Leticia... Nem tente entender u.u
Excluirkkkkkkk
#zoa
u.u Nossa então vou tentar compriender!!!kkk...
Excluirkkkkkkkkkkkk nem eu sei, antes de ontem fui dormir com 118 seguidores, hoje já estou com 133 kkk Oia a Neko zuando ashuashua
Excluirnossa sorte de vocês!!!eu dormi com 1 e acordei com 1...sabe o que é pior que isso?esse seguidor sou eu mesma!!!
ExcluirAshuashua tenta divulgar mais ele flor :D
ExcluirAdorei seu Blog muito lindo *--*
ResponderExcluirSeguindo aki
Gostaria de retribuir?
http://www.garotacomestilo1.blogspot.com.br/
Obrigada, já segui de volta!!
ExcluirPosso reblogar no ideias?
ResponderExcluirhttp://ideiasdasym.blogspot.com.br/
Claro que sim, só não esqueça de colocar os créditos :D
Excluirvou reblogar então...
ExcluirOk :D
ExcluirAdoro seus posts Flor *--*
ResponderExcluirTe acompanhando sempre <3
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
ResponderExcluirhttp://agd-doce.blogspot.com.br/
É mesmo, obrigadaa >u<
ExcluirFico muito bonito os comentes assim. Quando for trocar de layout, acho que usarei esse tuto.
ResponderExcluirDavid - Leitor Compulsivo
Obrigada, espero que use mesmo >u<
ExcluirObrigadaa, espero que use mesmo >u<
Excluirnossa sorte de vocês!!!eu dormi com 1 e acordei com 1...sabe o que é pior que isso?esse seguidor sou eu mesma!!!
ResponderExcluirkkkkk 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 ;)
ExcluirObrigada!!!
ExcluirDe nada :)
ExcluirAmei o tuto, Obrigado Mandi :3
ResponderExcluir