© Copyright 2003 by BasicTips.com, division of BasicTemplates.com
Here is a quick little trick to enhance
your page links using CSS. This is the Part 2 in a series of cheap
link tricks we will be publishing. :)
If you haven't read Part 1? Go
there now.
Now onto Part 2: Go
to this page and roll your mouse over the links and watch
what happens. Ha! Didn't expect that again, did you? Okay, maybe
you did. But go ahead, try it again, and then we'll show you how
we did it.
In addition to the hover elements we added in Part 1, we have
added several new elements. We added a text-transform property
to make all hovers uppercase letters spaced 2 pixels apart. We
added padding to the hover consisting of 2 pixels on the top and
bottom and 1 pixel to the right and left. To make it jump out
further, we included a solid blue background border that is 2
pixels wide at the top and bottom with a 3 pixels wide border
on the left and right in green.
Yes, we know this week's example is really extreme, but we wanted
to put as many elements in the style block so you could have fun
taking them out one-by-one and then viewing your page with/without
them. It also is the perfect example of "What Happens When You
Go Crazy with CSS" ... lol
The code between the HEAD tags of this page looks like this (use
it for each page you want the effect to appear on):
<style type="text/css">
<!--
a:hover { font-style: italic; text-decoration: underline overline;
font-size: 18px; font-family: Georgia, "Times New Roman"; font-weight:
bold; color: #FF0000; background-color: #FFFF00; text-transform:
uppercase; letter-spacing: 2px; padding-top: 2px; padding-right:
1px; padding-bottom: 2px; padding-left: 1px; border-color: #0000CC
#009900; border-style: solid; border-top-width: 2px; border-right-width:
3px; border-bottom-width: 2px; border-left-width: 3px}
-->
</style>
The Code for external style sheets (controls your entire website's
link hovers and is highly recommended):
a:hover { font-style: italic; text-decoration: underline overline;
font-size: 18px; font-family: Georgia, "Times New Roman"; font-weight:
bold; color: #FF0000; background-color: #FFFF00; text-transform:
uppercase; letter-spacing: 2px; padding-top: 2px; padding-right:
1px; padding-bottom: 2px; padding-left: 1px; border-color: #0000CC
#009900; border-style: solid; border-top-width: 2px; border-right-width:
3px; border-bottom-width: 2px; border-left-width: 3px}
Incidently, if you want to control the text size on your web pages
so that your visitors are better able to view your pages as you
intended, always use "px" (pixels).
Don't be afraid to take out style elements and see how your page
looks without them. Try taking out one at a time and see what
looks best to you. If you don't like the borders, simply take
them out. If you would rather replace the text-transform with
a lowercase style, change the word "uppercase" to "lowercase".
Replace the color codes with whatever floats your boat or tickles
your nose. :) Okay, it's NOT late but I'm still on a roll---over.
{snicker}
And there you go, another Cheap Link Trick with CSS by BasicTemplates.com.
Return to CSS Tutorial Index
Get
your Business Domain Name for only $9.95,
Right Here, Right Now!
|
