• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

31 de maio de 2013

Efeito Autores Balloon

- Terminei de arrumar o ChocoMapa (www)
Olá gente, tudo de boa na lagoa? Acabei de voltar do super mercado, está friozinho hoje por aqui, mais estou bem ^^'

Hoje tentarei ver o último episódio de Another, podem assistir aqui também (www) é ótimo, não irão se arrepender, eu sempre ouvia as pessoas dizendo que esse anime é ótimo, sempre concordei, pois parecia mesmo ser ótimo, só não o via pois parecia ser muito malígno, mas... anti ontem, fui vê-lo, e hoje, já estou no último episódio, haha' muito bom mesmo, é quase a mesma coisa que o anime hyouka (www) só que com mais terror, e mortes, mais não é macabro, é bem legal, de terror.
Mas, antes de ver o último episódio de Another, irei trazer para vocês um tutorial de como fazer esse efeito que temos nos autores do blog:

Vocês poderão usar nos afiliados também é claro, bem, eu recebi esse pedido, então fui procurar nos favoritos para poder dar os créditos ao blog onde peguei o efeito, então não achei-o, peguei do HTML do A.N mesmo.


Clique na setinha, e cole antes de ]]></b:skin>:
 .tooltip {
text-decoration: none;
position: relative;
display: inline-block;
transition: all 0.10s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
-webkit-transition: all 0.10s ease-in-out;
}
.tooltip:hover {
color: #fff; /* COR DA FONTE*/
}
.tooltip span {
pointer-events: none;
opacity: 0;
-moz-border-radius: 5px;
-webkit-radius:5px;
border-radius:5px;
filter: alpha(opacity=0);
background: #edc2cb;  /* COR DA SETINHA 1*/
width:62px;
padding: 4px;
font-size: 9px; font-family: arial;
color: #fff;
text-transform:uppercase;
text-align:center;
color: #fff;  /* COR DA FONTE*/
left: 50%;
margin-left: -35px;
display: block;
position: absolute;
z-index: 30;
bottom: -10px;
transition: all 0.25s ease-in-out;
-moz-transition: all 0.10s ease-in-out;
-webkit-transition: all 0.10s ease-in-out;
}
.tooltip:hover span {
display: block;
pointer-events: auto;
opacity: 1;
filter: alpha(opacity=100);
bottom: 75px;
}
.tooltip span:before, .tooltip span:after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #edc2cb;  /* COR DA SETINHA 2, TEM QUE SER A MESMA COR DA SETINHA 1*/
z-index: 29;
}
.kara{
width:70px;
height:70px;
margin-left:1px;
margin-right:1px;
border:1px solid #9acfd9;  /* COR DA BORDA */
-webkit-transition-duration: .60s;
}
.kara:hover{
width:70px;
height:70px;
margin-left:1px;
margin-right:1px;
border:1px solid #edc2cb;  /* COR DA BORDA */
-webkit-transition-duration: .60s;
}

Salve. Cole o código abaixo em um HTML // Javascript:

<a href="URL" class="tooltip"><img src="URL_DA_IMAGEM" class="kara" /><span>NOME</span></a>

Se quiser acrescentar mais autores, copie e cole o código acima quantas vezes precisar ;)

14 comentários:

  1. sempre quis saber esse efeito . vou usar quando tiver uma autora shashahshahshashshsha :(
    textinho de amor ♥ o primeiro > http://quaseprincipa.blogspot.com.br/

    ResponderExcluir
  2. Hihi ótimo tutu, tava com saudades de vc :D Fazia tempo que eu não passava aqui ^^"
    Chu~
    mutant-paradise.blogspot.com

    ResponderExcluir
  3. Muito bom o tutorial. Vou usar quando abrir vagas para postadores ;)
    Kiss
    with-you-s2.blogspot.com

    ResponderExcluir
  4. aww eu amo esse efeito, na verdade eu amo o lay do blog ainda mais pq é de TWD *-*

    ResponderExcluir
    Respostas
    1. Ah TWD, amo demais, fico feliz por gostar desse efeito também ^^'

      Excluir
  5. Que efeito legal, gostei muito :3
    Que fofo o balãozinho que sobe quando passa o mouse *o*
    xoxo,

    ResponderExcluir
  6. Eu vou usar nos afiliados, dei uma modificada para combinar mais com o layout, mas ainda vou te creditar :) Obrigada.

    ResponderExcluir
  7. Posso me afiliar com vocês?

    howmathy.blogspot.com

    ResponderExcluir
  8. Muito lindo esse efeito mas não usei no gadget autoras *U*
    geekegirlie.blogspot.com

    ResponderExcluir