Popular Post

Posted by : christiane affonso 16/03/2013


 Oi Lindonas.....
Bom,para quem não sabe,tooltip são balões que trazem palavras ou frases dentro, só que no caso, esses tooltips só podem ser usado em imagens,como num recomendo e tals. Irei ensinar dessa vez,quatro tipos de tooltips bem legais para vocês poderem usar.

 



   Demo 01 ●●●  
Demo 02 ●●●
Demo 03 ●●●
Demo 04 ●●● 

No código do css que estarei postando á baixo, no primeiro tt-wrapper li a vai ter owidth e heightque é a largura e altura das suas imagem que vão ficar, já no tt-wrapper li a span vai ter a width que é largura do balão,que você pode alterar se preferir, o margin-left que é a posição onde irá ficar, se é mais ao centro ou ao canto, border: 4px solid que basicamente não mudou nada do meu tooltip já que utilizei a mesma cor de fundo,mais ele é o contorno, background e text-shadow que são definidos pelo rgba ao invés de cores em hexadecimal (#cor) pois o fundo terá uma leve transparência, mais é super fácil. Abram seu photoshop e escolham a cor que iram querer para o fundo, quando vocês vão pegar uma cor, simplesmente copiam o que aparece depois de #, agora vamos copiar os números que estão em R, G e B e iremos colocar, exatamente nesta ordem no código do rgba. Ou seja: background-color: rgba(valor do R, valor do G, valor do B, 0.7); Ah, o 0.7 é o valor da transparência. E por fim, o border-top: 10px solid rgba(0,0,0,0.1); que é a setinha,você pode mudar se quiser,mais não aconselho. Já o box-shadow é a sonha que ficar no balão. E o resto dos código,não mexa em nada. Lembrando que você tem que colocar suas imagens que vão aparecer,dentro do css,faça que nem está logo á baixo:
.tt-wrapper li .CLASS DA IMAGEM 01{ background: url('imagem') top left no-repeat; }
Se quiserem mais imagens,é só ir repetindo o código,mudando a class da imagem. 

Demo 01
Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:
.tt-wrapper li{float: left; list-style-type:none;}
.tt-wrapper li a{ display: block; width: 68px; height: 70px; margin: 0 2px;  outline: none; position: relative;}
.tt-wrapper li a span{width: 90px; height: auto; line-height: 20px; padding: 1px;  left: 50%; margin-left: -55px; font-family: 'Georgia', serif;  font-weight: 400; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1); text-align: center; border: 4px solid #4f4e76; background: rgba(78,79,118,1); text-indent: 0px; border-radius: 5px; position: absolute; pointer-events: none; bottom: 100px; opacity: 0; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(0,0,0,0.1);}
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #4f4e76;}
.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 70px;}
Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:
<ul class="tt-wrapper">
    <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li>
</ul>
Enfim,é isso.
Demo 02
No css do demo número 02,vai ter no tt-wrapper li a span o width e height é o tamanho que o balão irá ficar, e lembrando que eles tem que serem iguais, e noline-height é a altura que o texto dentro no balão irá ficar. De resto,não mexa em nada,só na aparência mesmo. Coloque o código abaixo no css:
.tt-wrapper li a{ display: block; width: 68px;height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;}

.tt-wrapper li{float: left; list-style-type:none;}
.tt-wrapper { padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;}

.tt-wrapper li a span{ width: 70px; height: 70px; line-height: 70px; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(20, 39, 53, 0.1); text-align: center; border: 5px solid #162a39; background: rgba(22,42,57,0.5); text-indent: 0px; position: absolute; pointer-events: none; border-radius: 50%; bottom: -40px; opacity: 0; box-shadow: 0px 3px 8px rgba(0,0,0,0.1); -webkit-transform: scale(0.2); -moz-transform: scale(0.2); -o-transform: scale(0.2); -ms-transform: scale(0.2); transform: scale(0.2); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}

.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 50px; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}
Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:
<ul class="tt-wrapper">
    <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li>
</ul>
Enfim,é isso.
Demo 03
Logo á cima,ensinei o necessário para você poder pessoalizar o seu tooltip,agora vai no seu css e coloque o código á baixo:
.tt-wrapper a{display: block; width: 68px; height: 70px; margin: 0 2px; outline: none; position: relative; z-index: 2; text-indent: -9000px;}

.tt-wrapper li{float: left; list-style-type:none;}
.tt-wrapper li a span{ width: 80px; height: auto; padding: 10px; left: 50%; margin-left: -55px; font-family: 'Alegreya SC', Georgia, serif; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(255, 155, 106, 0.6); text-align: center; border: 5px solid #ff9b6a; background: rgba(255, 155, 106, 0.5); text-indent: 0px; position: absolute; pointer-events: none; bottom: -40px; opacity: 0; box-shadow: 0px 1px 2px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-transform: rotate(0deg) scale(0); -moz-transform: rotate(0deg) scale(0); -o-transform: rotate(0deg) scale(0); -ms-transform: rotate(0deg) scale(0); transform: rotate(0deg) scale(0);}

.tt-wrapper li a:hover span{ opacity: 0.9; bottom: 100px; -webkit-transform: rotate(-90deg) scale(1); -moz-transform: rotate(-90deg) scale(1); -o-transform: rotate(-90deg) scale(1); -ms-transform: rotate(-90deg) scale(1); transform: rotate(-90deg) scale(1);}
Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:
<ul class="tt-wrapper">
    <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li>
</ul>
Enfim,é isso aí.
Demo 04
Finalmente o último tooltip de hoje, e o que mais gosto. Ele é bem parecido com o primeiro que ensinei,daí é só fazer praticamente a mesma coisa do outro, coloque o código abaixo no seu css:
.tt-wrapper li{float: left; list-style-type:none;}
.tt-wrapper{ padding: 0; width: 435px; height: 70px; margin: 80px auto 30px auto;}

.tt-wrapper li a span{ width: 100px; height: auto; line-height: 20px; padding: 10px; left: 50%; margin-left: -64px; font-family: 'Georgia', serif; font-style: italic; font-size: 14px; color: #fff; text-shadow: 1px 1px 1px rgba(240,126,132,0.1); text-align: center; border: 4px solid #f07e84; background: #f07e84; text-indent: 0px; border-radius: 5px; position: absolute; bottom: 70px; opacity: 0; visibility: visible; pointer-events: none; box-shadow: 1px 1px 2px rgba(0,0,0,0.1); -webkit-transform: translate(35px) rotate(25deg) scale(1.5); -moz-transform: translate(35px) rotate(25deg) scale(1.5); -o-transform: translate(35px) rotate(25deg) scale(1.5); -ms-transform: translate(35px) rotate(25deg) scale(1.5); transform: translate(35px) rotate(25deg) scale(1.5); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.tt-wrapper li a span:before,
.tt-wrapper li a span:after{ content: ''; position: absolute; bottom: -15px; left: 50%; margin-left: -9px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid rgba(240,126,132,0.1);}
.tt-wrapper li a span:after{ bottom: -14px; margin-left: -10px; border-top: 10px solid #f07e84;}
.tt-wrapper li a:hover span{ visibility: visible; opacity: 0.9; -webkit-transform: translate(0px) rotate(0deg) scale(1); -moz-transform: translate(0px) rotate(0deg) scale(1); -o-transform: translate(0px) rotate(0deg) scale(1); -ms-transform: translate(0px) rotate(0deg) scale(1); transform: translate(0px) rotate(0deg) scale(1);}
Siga os passo que ensinei logo á cima,para fazer as mudanças necessárias. Agora no teu html:
<ul class="tt-wrapper">
    <li><a class="CLASS QUE COLOCOU NO CSS" href="LINK"><span>TITULO</span></a></li>
</ul>
Bom gente, é isso, espero que tenham gostado dos efeitos e tudo mais.

{ 5 comentários cutes ... read them below or Comment }

  1. Ola voce ganhou um selo da campanha todos unidos contra o plagio, se aceitar o codigo esta na lateral do meu blog
    http://femininaoficial.blogspot.com.br/
    espero que goste beijos

    ResponderExcluir
  2. amore tem post novo de TAG, caso vc ja tenha respondido me mande lá no blog para eu ver:

    http://epidemiabeauty.blogspot.com.br/2013/03/tag-hopaholic-viciada-em-compras.html

    se ainda nao respondeu, responde tbm, pode ser escrito ou video.

    ResponderExcluir
  3. Essas coisas fofas dificilmente a gente encontra.. Parabéns pelo post
    annagranado.blogspot.com.br/

    ResponderExcluir
  4. Linda postagem! Obrigada pelos selinhos! Amei! Beijos, Lylian

    ResponderExcluir

Carinhas......
♥❤∞ ☆ ★ ✖ 。◕‿◕。® ™ ☏✿゚✤
❝❞✥ ✦ ✧ ✩ ✫ ✬ ✭ ✮ ✯ ✰ ✱ ✲ ✳ ❃ ❂ ❁ ❀ ✿✼ ✻ ✺ ✹ ✸ ✷ ₪ ❃ ❂ ❁ ❀ ✿ ✾ ✽ ✼ ✻ ✺ ✹ ✸ ✷
✶ ✵ ✴ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❖(◕‿◕✿) 。◕‿◕。 ⊱✿◕‿◕✿⊰(◡‿◡✿)(◕〝◕)◑▂◐ ◑0◐ ◑︿◐ ◑ω◐ ◑﹏◐ ◑△◐ ◑▽◐
●▂● ●0● ●︿● ●ω● ●﹏● ●△● ●▽●
⊙▂⊙ ⊙0⊙ ⊙︿⊙ ⊙ω⊙ ⊙﹏⊙ ⊙△⊙
≡(▔﹏▔)≡
。◕ ‿ ◕。 ಠ_ಠ ( °٢° ) ʘ‿ʘ ಥ⌣ಥ ಥ‿ಥ (ΘεΘ;) (n˘v˘•)¬ (✪㉨✪) ヽ(๏∀๏ )ノ (╹ェ╹) ╮(─▽─)) ≖‿≖ (ノ◕ヮ◕)ノ*:・゚✧ (⊙ヮ⊙) ᕦ(ò_óˇ)ᕤ ᕙ(⇀‸↼‶)ᕗ ( ಠ◡ಠ ) (•⊙ω⊙•) ‘︿’ ( ´∀`)☆ (≧ω≦) (´ー`) (つд`) ( ̄。 ̄) (*~▽~) ( ^▽^)σ)~O~) (=゜ω゜) (´ω`) (ノ_・。) (-_- )ノ (´ヘ`;) (^^;) ( ´∀`) ((((゜д゜;)))) (=ω=;) (。・_・。) (o´ω`o) (^▽^) (*´д`*) ( ̄□ ̄) ∩(︶▽︶)∩ (✿◠‿◠) (◡‿◡✿) (◕‿◕✿) (✖╭╮✖) (≧◡≦) (¬_¬) (◑‿◐) (◕‿-) ✖‿✖ (-’_’-) (╥_╥) (╯_╰) (╯3╰) (o_-) (¬‿¬) (◣_◢) (∪ ◡ ∪) (≧ω≦) o(≧o≦)o (⋋▂⋌) (॓_॔) (╯ಊ╰) (─‿‿─) ‹(•¿•)› (╯︵╰,) (︶︹︺) (∩︵∩) (。◕‿◕。) (⊙_◎) (~ ̄▽ ̄)~ (︶ω︶) (+_+) (。♥‿♥。) (✿ ♥‿♥) ♥╣[-_-]╠♥ ٩(͡๏̯͡๏)۶ ٩(-̮̮̃•̃)۶ ٩(̾●̮̮̃̾•̃̾)۶ ٩(-̮̮̃-̃)۶ (u_u) (*_*) (º_º) ٩(×̯×)۶ (ñ_ñ) (∩▂∩) (¬▂¬) (╯◕_◕)╯ (╹◡╹)凸 少 ¯\_(ツ)_/¯ (▰˘◡˘▰) (☞゚∀゚)☞ ლ(╹◡╹ლ) ヾ(^∇^)( ✿ ◠‿◠)

- Copyright © 2013 Cute Girl Pink - Date A Live - Powered by Blogger - Designed by Johanes Djogan -