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):
If it doesn't, it should just be added to the end of the code like this (using a dotted border for example):
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