Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Imagem: http://imageshack.us/photo/my-images/829/contatoa.jpg/
Olá,
Estou tentanto fazer este link ai igual o da imagem ai de cima, ele vai trocar a cor OnHover , estou em duvida da melhor forma de fazer.
<div id="contato"><a href="#">contato</a></div>
A estrutura ta assim, mas nao sei como criar o circulo ali, de uma forma que eu consiga fazer o efeito hover.Com background-image e background-position acredito que nao funcionaria, pois meu hover é lento, estilo fade.
Alguma dica ?
Use ul. Li para cada opção do menu e li:hover pra quando passar o mouse.
Background-position fica por tua opção, mas se usar fade jQuery recomendo usar imagens separadas.
Pra colocar o ícone separado também pode trabalhar com divs.
>
Use ul. Li para cada opção do menu e li:hover pra quando passar o mouse.
Background-position fica por tua opção, mas se usar fade jQuery recomendo usar imagens separadas.
Pra colocar o ícone separado também pode trabalhar com divs.
Só tem essa opção no menu,
<div id="contato"><a class="circulo" href=""></a><a href="#">contato</a></div>
Isso é semantico ?
No caso de usar duas imagens, teria que fazer um preload pra nao causar delay certo ?
Então Tuk, isso também vai da tua preferência. Eu não costumo fazer preload, pois geralmente uso background-position ou coloco direto (neste caso reduzo a qualidade da imagem pra carregar mais rápido).
<a class="circulo" href=""></a><a href="#">contato</a>
Já deixa de ser semântico pelo fato de usar "a" com class só para uma imagem, que seria o ícone, não? http://www.w3schools.com/tags/tag_a.asp
Manda o CSS da class "circulo" pra eu entender melhor.
Ah e por que não usa img src? Não precisa ser tudo em background... As pessoas acham que tudo tem que ser com background, CSS e esquecem do img. É um erro.
http://www.w3schools.com/html5/tag_img.asp :natalwink:
não utilizar 'img src' porque não ficaria bom na hora de fazer o fade, eu prescisaria de duas imagens, não acredito que seria a melhor forma.
Resolvi desta forma.
<div id="contato"><div id="circulo" class="circulo"></div><a href="#">contato</a></div>
#contato{
float:left;
margin-left:300px;
font-family:'PassionSansPDaaHairline';
font-size:22px;
}#contato .circulo{
width:28px;
height:28px;
display:block;
-moz-border-radius: 14px;
-webkit-border-radius: 14px;
background-color:#333;
background-image:url(../img/contatobg.png);
background-repeat:no-repeat;
background-position:9px 10px;
margin-left:17px;
}#contato a{
text-decoration:none;
color:#595959;
}$("#contato").hover(
function () {
$('#circulo').animate({ 'background-color': '#27b6d0' },700);
},
function () {
$('#circulo').animate({ 'background-color': '#000' },700);
}
);Achei muito código pra pouco efeito.
O que acharam ?
>
Achei muito código pra pouco efeito.
O que acharam ?
Achei muito código pra pouco efeito também. Por isso faria com img src. No meu conceito, também é mais semântico.
Mas é uma solução boa. O uso do a com class só pra imagem que era meio sem sentido...
Uma dica: melhore o CSS. Isso, por exemplo, é desnecessário:
background-color:#333;
background-image:url(../img/contatobg.png);
background-repeat:no-repeat;
background-position:9px 10px;Pode reduzir.
Ainda como exemplo, as primeiras linhas:
background-color:#333;
background-image:url(../img/contatobg.png);Pode colocar assim:
background:url(../img/contatobg.png) #333;
Outra dica:
-moz-border-radius: 14px;
-webkit-border-radius: 14px;A propriedade border-radius não precisa mais de prefixos, pode colocar normal, sem -moz ou -webkit que funcionará normalmente.
coloquem o codigo completo...