Oi gente, hoje o tutorial,é sobre o efeito tooltip e um menu usando esse efeito. O efeito está na imagem abaixo:
Viu? Quando passa o mouse aparece a descrição.Então vamos começar: Para adicionar tooltip, cole esse codigo:
abaixo de:<script src="http://dyogophoenix.webs.com/Site/javascript/tooltip.js" />
<head>
E cole:antes dediv#qTip {
padding: 3px; /*Espaço entre a borda e o texto*/
border: 1px solid #666; /* Estilo da borda */
display: none; /*Não mexa*/
background: #999; /* Cor de fundo */
color: #fff; /*Cor da fonte*/
font-family: Verdana; /*Tipo de fonte*/
font-size: 9px; /*Tamanho da fonte*/
position: absolute; /*Não mexa*/
z-index: 1000; /*Não mexa*/}
]]></b:skin>
È só personalizar como está escrito no codigo.
Esse tipo de menu é bom para homepages, masd vamos começar, Procura por
]]></b:skin>
E acima disso cole:
E no gadjet cole esse:#men{
margin-top: -9px;
margin-left: 4px;
border:0px;
background:black;
height: 30px;
width: 150px;
text-align:center;
}
#men a{
font-family: "basically";
color: #FFFFFF;
font-size: 12px;
}
#men a:hover{
color: #FFFFFF;
text-decoration:none;
}
@font-face {
font-family: 'basically';
src: url('http://static.tumblr.com/q1ljzdc/aVnmidiyn/basically-serif_free-version-webfont.woff');
}
@font-face {
font-family: 'pf ronda';
src: url('http://static.tumblr.com/q1ljzdc/YHKmidj8f/pf_ronda_seven-webfont.woff');
}
.imagem{
border-botton:1px gray solid;
width:150px;
}
.imagem:hover{
-webkit-filter: opacity(0.5);
}
<img class="imagem" src="http://static.thesubwire.com/images/series/5/5/1/4/4eb849617a0c9646bd125093bce86f0e_0.jpg" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat" />
<br />
<div id="men">
<a href="http://www.blogger.com/linkisinho" title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat">Lorem impsum</a></div>
Nenhum comentário:
Postar um comentário