Pesquisar este blog

quinta-feira, 15 de novembro de 2012

Tutorial : Links em Fade + Efeito Tracejado

                         
                     Oooooieeeeee,
                 Como estão? vou ensinar á vocês a coloca links em fade,já que está na moda (eu acho)
                                                             (Clique em mais informações)

                                                                       
                          Vá em HTML e tecla CTRL+F ou F3 e pesquise por : a:link {
                         O código que você achou deve ser mais ou menos assim :
        
a:link {
  text-decoration:underline;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:none;
  color: $(link.hover.color);
}

       
                         

Apague tudo e substitue por :
a:link {
color: #ff7fb2;     /* -------- COR DO LINK ----------*/
text-decoration: none;
-webkit-transition: color 0.7s ease-out;-moz-transition:
color 0.7s ease-out;transition: color 0.7s ease-out;
}

a:visited {
color: #ff7fb2;   /*------ COR DOS LINKS VISITADOS -----*/
text-decoration:none;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
}

a:hover {
color: #FF82AB;    /*----- COR DOS LINKS AO PASSAR O MOUSE -----*/
text-decoration:underline;
filter:alpha(opacity=100);
-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;
  text-decoration:underline;
  color: $(link.hover.color);
 border-bottom: 1px dashed #FF82AB;    /*----- COR DO TRACEJADO -----*/
}
OBS : As cores podem ser alteradas, e se quiser tirar o sombreado e deixar só o tracejado substitue underline por none.Há outros tipos de bordas além da dashed ( no código acima ) como  a dotted (pontilhada)Créditos : Jackie Dream

Nenhum comentário:

Postar um comentário