 |
Making Pretty Links |
|
when you're about to click on a link and you run your mouse over it, its called hovering.
sometimes people have cool affects for when u hover over a link, here are some affects u can use to make ur links look nifty too.
somewhere in your html you should see something that looks like this...
<STYLE type="text/css">
A:link{color:COLOR;text-decoration:none;font-weight:normal;}
A:visited{color:COLOR;text-decoration:none;font-weight:normal;}
A:hover{color:COLOR;text-decoration:none;font-weight:normal;}
A:active{color:COLOR;text-decoration:none;;font-weight:normal;}
</style>
|
So basically you can add any of these to the A:hover section so it will look spiffy when someone moves their mouse over the link.
Of course, most likely most of these only work in Internet Explorer.
Hover Effects:
border:1 solid; border-color:COLOR; -- makes a solid border around links
border:1 dashed; border-color:COLOR; -- makes a dashed border around links
border-bottom:1 dashed COLOR; -- makes a dashed border on the bottom of the link
border-bottom:1 solid COLOR; -- solid border on the bottom of the link
filter:dropshadow(color=COLOR,offX=1,offY=1); height:7pt; -- shadow behind the link
filter:shadow(color=#000000,offX=1,offY=1); height:0; -- blurred shadow behind the link
filter:blur(add="0",direction="180",strength="4"); height:0; -- blurs links [what i normally use]
filter:fliph; height:0; -- backwards links
filter:flipv; height:0; -- turns links upside-down
filter:gray(); height:0; -- makes links gray [will make ur images black and white]
filter:invert(); height:0; -- inverts links to opposite colors
filter:mask; height:0; -- transparent [makes links disappear]
filter:wave(strength="1"); height:0 -- wavy links
height:0;color:COLOR;filter:wave(add=0,phase=4,freq=5,strength=2); -- wavy links
filter:glow(color=COLOR, strength=5); height:0; -- text glow
text-transform:uppercase; -- all capitals
text-transform:capitalize; -- first letter a capital letter
text-transform:lowercase; -- lowercase
background-color:COLOR; -- changes background color
position:relative;left:1px;top:1px; -- move links 1px from the left and top
still a little confused? heres an example
to make these work all u need to do is add them to the 'hover' section. so say u want to use the first one on the list. heres what u do.
your original html
<STYLE type="text/css">
A:link{color:COLOR;text-decoration:none;font-weight:normal;}
A:visited{color:COLOR;text-decoration:none;font-weight:normal;}
A:hover{color:COLOR;text-decoration:none;font-weight:normal;}
A:active{color:COLOR;text-decoration:none;;font-weight:normal;}
</style>
|
after you add the affect
<STYLE type="text/css">
A:link{color:COLOR;text-decoration:none;font-weight:normal;}
A:visited{color:COLOR;text-decoration:none;font-weight:normal;}
A:hover{color:COLOR;text-decoration:none;font-weight:normal;border:1 solid; border-color:BLUE;}
A:active{color:COLOR;text-decoration:none;;font-weight:normal;}
</style>
|
|
2:24
Com o suporte de  | | Inglês | | Albanês | | Árabe | | Búlgaro | | Catalão | | Chinês | | Croata | | Tcheco | | Dinamarquês | | Holandês | | Estoniano | | Filipino | | Finlandês | | Francês | | Galego | | Alemão | | Grego | | Hebraico | | Hindi | | Húngaro | | Indonésio | | Italiano | | Japonês | | Coreano | | Letão | | Lituano | | Maltês | | Norueguês | | Polonês | | Português | | Romeno | | Russo | | Sérvio | | Eslovaco | | Esloveno | | Espanhol | | Sueco | | Tailandês | | Turco | | Ucraniano | | Vietnamita |
|