Efeito gotinha

Oi pessoas!
Como vão? Hoje eu não  tenho nada pra falar, sério, eu  estou muito no tédio, e  nesses momentos eu penso que eu deveria estar na escola - lá pelo menos tem menos tédio ASUSAUH mais ou menos né. Eu fiquei muito feliz com o último post, que alcançou +100 comentários, pode parecer exagero mas é bastante pra mim. Vamos  ao post? 

Bom, hoje  eu  trouxe  um  tutorial  que  na verdade eu fiz, só  que  existem muitos parecidos, eu dei o nome de efeito 'Gotinha' porque ele se parece com uma gotinha ao passar o mouse, preview. Eu já tinha postado no blog With you, não é plágio tudo bem? O tutorial é bem simples assim como o efeito, e é só isso AUSAUH, vamos ver?

Vá em seu HTML, tecle Ctrl + F e procure por: ]]></b:skin>. Acima dessa tag, cole o código abaixo:

.bordinha {
padding: 1px; /* espaçamento da borda */
border: 1px solid #dad0cf; /* cor da borda */
border-radius: 100px 100px 100px 100px;
-webkit-transition-duration: .80s;
}
.bordinha:hover {
padding: 1px;
border: 1px solid #dad0cf; /* cor da borda hover */
border-radius: 100px 100px 0px 100px; /* não mude */
opacity: 0.80; /* opacidade mais baixa, se não quiser apague */
-webkit-transition-duration: .80s;
}
Agora em um Gadget HTML/JavaScript cole:

<center><a href="LINK AQUI" title="TÍTULO DA TOOLTIP"><img src="LINK DA IMAGEM" class="bordinha" /></a>
<a href="LINK AQUI" title="TÍTULO DA TOOLTIP"><img src="LINK DA IMAGEM" class="bordinha" /></a>
<a href="TÍTULO DA TOOLTIP" title="NOME"><img src="LINK DA IMAGEM" class="bordinha" /></a></center> 
Substitua o que está em negrito pelo que se pede. 

96 comentários:

  1. Já vi mesmo esse efeito em algum lugar, adoro ele e fica bem fofo no blog :3

    living-kpop.blogspot.com

    ResponderExcluir
    Respostas
    1. Falei que um monte de gente faz? ASUHASUH fico feliz que gostou *-*

      Excluir
  2. Momentos de tédio durante as férias, quem nunca?
    Adorei o efeito, já tinha visto em outros lugares, mas o seu é bem mais fácil de aplicar e bem mais trabalhado.
    i-nterrupt.blogspot.com

    ResponderExcluir
    Respostas
    1. Pois é >3< Eu falei uheuhe, sério? Ai que bom *u*

      Excluir
  3. AHUSHHS' Pelo menos na escola é diferente de casa -q
    Esse efeito é tão lindinho <3 Ele é simples, isso é fato *-*

    - @TMR ♡

    ResponderExcluir
  4. Eu também ando com tédio, ao menos na escola tem nossos amigos uahsuahs
    Amei esse efeito, super fofo <3

    - Kiss, Gaby ♥ || - Simple Things :3

    ResponderExcluir
  5. awn muito cute OMG adorei ; )

    louca-por-html.blogspot.com.br ~*

    ResponderExcluir
  6. Gostei muito do tutorial, ja tinha visto em vários so que o seu e mais explicadinho rsrs *--*
    Beijos ;3
    casadophotoscape-s2.blogspot.com.br

    ResponderExcluir
    Respostas
    1. Obrigada *3* Nossa, quantos blogs fizeram? o3o

      Excluir
  7. Que efeito lindo >u< Vou usar ele no layout que estou fazendo. :3

    http://heart-little.blogspot.com.br/

    ResponderExcluir
  8. Amei o menu *u*

    Kurai Yume / http://nyanmidnight.blogspot.com.br/

    ResponderExcluir
  9. Ótimo para colocar como menu! Adorei!

    Bitocas!
    www.likeparadse.combr

    ResponderExcluir
  10. Tipo,a gente passa um ano inteirinho na escola e não ve a hora que cheguem as férias aé chega nas férias e a gente não ve a hora de voltar pra escola.Amei o efeito, muito kawaii.

    ResponderExcluir
  11. Amei o efeito, super fofo e o blog testes é lindo :3
    super fácil o tuto amei

    Adolescente Nerd

    ResponderExcluir
  12. Parabéns pelos comentários, que cada vez cresça mais >3<
    Gostei do tutorial ...

    Beijos <3
    http://blog-a-little-of-each.blogspot.com.br/

    ResponderExcluir
  13. Adorei o tuto <3
    Beijokas!
    cate-land.blogspot.com

    ResponderExcluir
  14. É um efeito bem lindo *u* é o nome bem engraçado heushueshue


    Fairy Html - ★

    ResponderExcluir
    Respostas
    1. Obrigada*u* oxe, não parece uma gota? ç.ç

      Excluir
  15. Gostei do tutorial, o efeito é muito lindo! *w*

    15 Days
    Aguardo sua visita ~

    ResponderExcluir
  16. Acho mega fofo o tutorial, provavelmente meu comentario vai se perder pelo post mas queria dizer que conheci seu blog agora e que estou encantada, roubarei tudo u_u bjs

    ResponderExcluir
  17. Que efeito legal , coloquei no meu blog de test é super bacana , Talvez coloque no meu normal ..
    Amei o post
    beijos
    http://www.biiasecrets.com/

    ResponderExcluir
  18. Own Que Lindo Ameiii Mesmo muito Show. Beijinhos.

    http://winter--day.blogspot.com.br

    ResponderExcluir
  19. helo acabei de ver este efeito em um blog da olhada neste link aqui;

    http://www.whatnae.com/2013/12/efeito-css-lower.html?showComment=1386166162644#c6893399354970380253 (é iguallzinho ao seu)

    kissu , LP-HTML || louca-por-html.blogspot.com.br ~*

    ResponderExcluir
    Respostas
    1. Lô, parece que o Birthday Cake tem um efeito igual o meu e eu não sabia, só estou com medo que eles achem que era plágio, mas eu mesma que fiz o efeito sem ver nenhum tutorial ><

      Excluir
    2. vc não é dessas q copiam coisas dos outros...eu t avisei pois pensei q eles estavam te copiando!!! : ) como a clara já disse relaxa!! ^^

      Excluir
  20. Que divo o efeito *3* E não se preocupe com a parada do BC, é um efeito bem básico e bem visto, então não tem porquê você ter plagiado, relaxa q

    Ficou perfeito mesmo, talvez eu use num próximo layout >33<

    Kiss, kaorii.com ~

    ResponderExcluir
    Respostas
    1. Obrigada *3* Ai, fiquei mais tranquila agora q Aw, espero que use ^^

      Excluir
  21. Prefiro mil vezes ficar brisando em casa do que ir pra escola, q Esses efeitos estão lindos, adorei o da gotinha <33

    http://welcome-to-kawaii-land.blogspot.com.br/

    ResponderExcluir
  22. Nem me fale, o tédio me possui, haha ;)
    Lindíssimo efeito *--*

    ~Bye
    Explosion of Paradise

    ResponderExcluir
  23. Somos duas no tédio. O/ GINJEQOWIOFNGREIU Na escola pelo menos eu teria meus amigos pra conversar, aqui eu fico forever alone olhando pra tela do computador que nem uma jumenta. -q
    Nhaw, o efeito é bem simples, porém bem fofo. <3 Adoro efeitos assim, com hover nas bordinhas, simplesmente me encantam. ;3; Vou salvar nos favoritos, talvez eu o use. O/

    ResponderExcluir
    Respostas
    1. Não é? ç.ç
      Obrigada e fico feliz que gostou :3

      Excluir
  24. Que menu perfeito ^~^
    É muito fofinho, gostei bastante ♥

    Kiss *u* || Ops Izzie!

    ResponderExcluir
  25. Que perfect!!! Eu amei o efeito e já salvei nos favoritos u.u
    Beijos flor. Com carinho, amora queen -q

    blogandoseuassunto.blogspot.com.br/
    blog-sapatinho-de-cristal.blogspot.com.br/
    cha-de-glitter.blogspot.com.br/
    world-butterflies.blogspot.com.br/

    ResponderExcluir
  26. Desculpe o sumiçõ HAUSHAU' acredita que eu ainda não entrei de férias? Eu comecei a dois dias a fazer as provas do quatro bimestre, ou seja, ainda tem alguns dias pela frente; e ao que parece, ficarei de recuperação. Mdss vou passar metade do meu dezembro dentro de uma prisão -qq

    Eu acho esse efeito a coisa mais fofa do universo cara, juro! E sim, ele se parece com uma gotinha AHUSHASU' vou usar no próximo lay, já te coloquei ele no código e tals hehe
    Ah, parabéns pelos comentários viu? Tu merece u.u Eu também fico toda me querendo quando recebo +20 em um HAUSHASU' normal, eu acho >3<

    Kissus ♡ ~ Psycho T.

    ResponderExcluir
    Respostas
    1. Oche imagina u_u. Mas gente, que coisa horrível, como você vai suportar isso? ASHUASUH meol Deols

      Eu também acho muito fofo *u* ASUHASUH awn que bom que foi útil :3

      Obrigada awwwn *uu* Super normal, eu também tenho isso u.u

      Obrigada pelo coment ♥

      Excluir
  27. Já vi o efeito em vários lugares u_u é bem bonito! Amei o tutorial

    Beijos,
    Spring in Paris

    ResponderExcluir
    Respostas
    1. Não disse? Não fale assim, desse jeito você me deixa nervosa, molier o3o
      Obrigada ueuheuhe

      Excluir
  28. A gente espera as férias por quase um ano inteiro e quando elas chegam a gente não tem nada pra fazer #saidemimtédio UHEUHEUHEUH
    Achei o efeito lindo e muuuito fofo *-* Foi pros favoritos u3u

    ResponderExcluir
    Respostas
    1. Pois é ASUHASUH talvez eu vá amanhã na escola o3o

      Obrigada *u* awn <3

      Excluir
  29. Ameei efeito super fofo :3 , sou nova no blogger , amei o blog to seguindo :3

    worldof-gabi.blogspot.com

    ResponderExcluir
  30. bem útil o tutorial !
    mortifer4.blogspot.com

    ResponderExcluir
  31. Eu prefiro ficar com tédio em casa do que na escola LOL ~ esse efeito é muito fofo *-*

    ResponderExcluir
    Respostas
    1. Verdade ASUHASUHA Fico feliz que gostou ♥

      Excluir
  32. Super fácil de fazer né? Adorei o blog, +follow.

    omgposey.blogspot.com

    ResponderExcluir
  33. Eu amei o efeito, mas usaria só se soubesse fazer layout, coisa em que sou leiga hdsbhjsbshdbdshbsdhbdshbds
    Se blog é MUITO bonito. Seguindo <3
    http://freebitc-h.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Obrigada *3* SUHSUHSAUH oshe que nada.

      Obrigada, awwn!

      Excluir
  34. Ele é lindo esse efeito , tô pensando em usar um dia desses
    candytendy.blogspot.com

    ResponderExcluir
  35. Oi helo,,,passando pra avisar q tem post novo <3

    louca-por-html.blogspot.com.br ^* kissus

    ResponderExcluir
  36. Adorei, que efeito cute

    http://stroke-of-insanity.blogspot.com.br/

    ResponderExcluir
  37. Eu adorei esse efeito, é muito fofinho e delicadinho :3 Eu estou já fazendo planos pra essas férias para não ficar no tédio, na verdade são tantos planos que eu nem sei se vai dar tempo! SHASUASU Com certeza eu prefiro ficar no tédio em casa do que na escola D: Qual é o seu problema? KKKKK -brincs
    Hey, estou te seguindo - se você gostar do meu blog - poderia retribuir? :3 eu também gostaria de saber se posso ocupar a última vaguinha nos seus afiliados? Se sim, responde no meu bloguinho. Espero que aceite!

    Beijocas da Saroca <3
    interesses-sutis.blogspot.com

    ResponderExcluir
    Respostas
    1. Obriigada *3* ASHUSAUSAUH ah sei lá cara, aqui tá muito calor, e ir um dia na escola, com poucas pessoas ia ter só bagunça, entende? Seria legal u.u q. Mesmo assim, estou arrumando planos também ueuheuhe

      Retribuo sim *u* Aww, aceito, vou responder lá!

      Excluir
  38. Que efeito foda hihi
    http://worldpotatoes.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. SAUHSAUHAUH Obrigada e fico feliz que gostou ^^

      Excluir
  39. prefiro ficar em casa do que na escola kkkk
    esse efeito é lindo

    Beijos, Brenda do Gave Crazy

    ResponderExcluir
    Respostas
    1. SAUHSUHASUH é que estou no tédio ç.ç
      Obrigada *3*

      Excluir
  40. Oi lindona, está rolando o primeiro sorteio no meu blog, de um lindo anel de prata..
    Te convido a participar, conto com você!
    Beijos princesa & obrigada.
    ACESSE: http://www.estiilocarol.com.br/2013/12/1-sorteio-do-blog-anel-de-prata.html

    ResponderExcluir
  41. Como eu já disse, em vários outros blogs, adoro tutoriais, porque me ajudam muito mesmo. Seu blog é lindo, gostei das cores, diferente. Estou seguindo, bjs.

    http://luanapdomingues.blogspot.com.br/

    ResponderExcluir
  42. 100 comentários? Exagero nada, eu não recebo nem 10 e fico pulando de alegria! o/

    Lindo esse efeito ^^

    ResponderExcluir
    Respostas
    1. ASUHSAUH eu pulo só com um também q

      Obriigada <3

      Excluir
  43. Gostei muito do efeito, devo usar no próximo layout *--*
    D-Resources

    ResponderExcluir
  44. O efeito é lindo. Quando eu usar imagens nos afiliados eu quero usar esse efeito, já até salvei como favorito aqui :3
    Faz uma visitinha, eu agradeço:
    República Crash u3u

    ResponderExcluir
  45. Muito fofinho o efeito, ta nos meus favoritos *-*
    Faz uma visitinha? Obrigada! O blog tem 1 dia :P
    http://landofresources.blogspot.com.br/

    ResponderExcluir
  46. Esse efeito é perfeito! Hahah, até rimou. Pois bem, sempre quis saber como eu faria para fazer esse efeito. Amo ele.
    Será que, além deste efeito que faz a imagem ficar como uma gota, existe um efeito que transforme a imagem em um coração?

    Bjus

    ResponderExcluir

Regras:
-Aceito críticas, porém, comentários ofensivos/maldosos serão apagados.
-Não aceito mais: Seguindo, segue de volta?
-Coloque o link de seu Blog no fim do comentário, é garantido que irei visita-lo e dependendo do conteúdo, até posso segui-lo :3
-Comente a vontade!