[Resolvido] Link contato

[Tuk 0]

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 ?

[kenweb 0]

coloquem o codigo completo...

[Diéssica 140]

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.

[Tuk 0]

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 ?

[Diéssica 140]

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:

[Tuk 0]

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 ?

[Diéssica 140]

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.