Personalizar Links com Css

hoje o tuto é sobre personalização de links .como no print:

normal

com o mouse sobre



O link tem varios estados ai vão eles:


Hover: acontece quando o mouse esta sobre o link.

Visited: são os links que já foram visitados

Active: acontece quando você está nesse link

Bom para personalizar o css, abra o blogger, vá em modelo > personalizar > editar html

e antes de

]]></b:skin>

e cole:
<---------------------------------------------------------------------------------------------------------> //* feito por gui todos os direitos*//
 a:link { color:  #####; /*cor do link normal*/  text-shadow: black 0.1em 0.1em 0.2em; /*sombreado 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;/*efeitos de transição(não  mecha aqui)*/ } 

a:visited { color:#696969;/*cor do link visitado*/ text-decoration: none; -webkit-transition: color 0.7s ease-out;-moz-transition: color 0.7s ease-out;transition: color 0.7s ease-out;/*efeitos de transição(não  mecha aqui)*/ }

 a:hover { color:#000000;/*cor do link quando o mouse estiver por cima*/ text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE; /*sombreado do link*/ text-decoration:none; font: Verdana, Arial, Helvetica, sans-serif; }

 a:active { color:#000000;/*cor do link que recebe um click*/ text-shadow: black 0.1em 0.1em 0.2em,0 0 10px #1E90FF, 0 0 20px #1E90FF, 0 0 30px#1E90FF, 0 0 40px #87CEEB, 0 0 70px #87CEEB, 0 0 80px #DCDCDC, 0 0 100px #DCDCDC, 0 0 150px #AFEEEE;/*sombreado do link*/ text-decoration:none; font: Verdana, Arial, Helvetica, sans-serif; }
<--------------------------------------------------------------------------------------------------------->
bom por hoje é só valeu

0 comentários:

Postar um comentário

 

TODOS OS DIREITOS RESERVADOS A SAIKYOU DESIGN - DESIGN E SISTEMA PRODUZIDOR POR DANIEL BARRETO