Warning: include(/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 1

Warning: include() [function.include]: Failed opening '/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 1

Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 2

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 2
Link Effects


Do not copy this page word for word on your own site - it took me a million years to write! (Well, maybe that's a slight exaggeration...)

To use:
1. Copy the following code:



2. Choose the link effect(s) you want to use (if there's more than one, make sure they are separated by a semi colon ;)
3. Add the line of code to the code given in step one. If it says text decoration at the beginning, it should look like this at the end (if I was using an underline code):

<style type="text/css"> <!-- A:link{color: 000000; text-decoration: underline;} A:visited{color: 000000; text-decoration: none;} A:active{color: 000000; text-decoration: none;} A:hover{color: 000000; text-decoration: underline} --> </style> If it doesn't, it should just be added to the end of the code like this (using a dotted border for example):

<style type="text/css"> <!-- A:link{color: 000000; text-decoration: none;} A:visited{color: 000000; text-decoration: none;} A:active{color: 000000; text-decoration: none;} A:hover{color: 000000; text-decoration: none; border:1 dotted; border-color:#000000} --> </style> Remember that you can add a code to any of the 4 lines, all of them, or just the hover if you like. You can also change any of the '000000' to your own hex colour.

Solid Border | Dashed Border | Dotted Border

border:1 solid; border-color:#000000; <- Solid Border
border:1 dashed; border-color:#000000; <- Dashed Border
border:1 dotted; border-color:#000000; <- Dotted Border

Solid Border Underneath | Dashed Border Underneath | Dotted Border Underneath

border-bottom:1 solid #000000; <- Solid
border-bottom:1 dashed #000000; <- Dashed
border-bottom:1 dotted #000000; <- Dotted

Solid Border Above | Dashed Border Above | Dotted Border Above

border-top:1 solid #000000; <- Solid
border-top:1 dashed #000000; <- Dashed
border-top:1 dotted #000000; <- Dotted

Underline | Overline | Underline Overline | Line-Through

text-decoration:underline; <- Underline
text-decoration:overline; <- Overline
text-decoration:underline overline; <- Underline Overline
text-decoration:line-through; <- Line-Through

Inverts link colours | Inverts link colours | Makes links grey

filter:Invert(strength=3); height:9px <- Inverts
filter: invert(); height:0 <- Inverts
filter: gray(); height:0 <- Makes Grey

Drop Shadow | Blurred Drop Shadow | Blur

filter:dropshadow(color=#000000,offX=1,offY=1); height:7pt; <- Drop Shadow
filter:shadow(color=#000000,offX=1,offY=1); height:0 <- Shadow
filter:blur(add="0",direction="180",strength="2"); height:0; <- Blurs

Backwards Links | Upside Down Links

filter:fliph; height:0; <- Backwards
filter:flipv; height:0; <- Upside Down

Wavy Links | Wavy Links

height:0;color:000000; filter:wave(add=0,phase=4,freq=5,strength=2); <- Wavy
filter: wave(strength="1"); height:0; <- Wavy

capitalises the first letter | capitalises whole word | MAKES LINKS LOWERCASE

text-transform:capitalize; <- Capitalises 1st letter
text-transform:uppercase; <- All Capitals
text-transform:lowercase; <- All Lowercase

Glowing Links | Bold Links | Adds Background Colour | Transparent Links

filter:glow(color=000000, strength=5); height:0; <- Glow
font-weight:bold; <- Bold
background-color:000000; <- Background Colour
filter: mask; height:0; <- Transparent


Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 98

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/linkeffects.php on line 98