Replace the usual underline text decoration of links while on hover
I used a small animated gif arrow image as my underline for the links when hover,. (size of image depends on you, just make it sure it is small and will look like a line when on repeat-x)
this is the image i used (the size is 10x5)..
you can do this on all links on your entire site or just a section of your site links only..
this code is for navbar links only
a.topt:hover, a:visited.topt:hover, a:link.topt:hover, a.toptsel:hover, a:visited.toptsel:hover, a:link.toptsel:hover {
text-decoration:none;
padding-bottom: 2px;
background: url(image_url_here) repeat-x bottom ;
}
this code is for entire links..
a:hover, a:visited:hover, a:link:hover {
text-decoration:none;
padding-bottom: 2px;
background: url(image_url_here) repeat-x bottom;
}
just choose a proper selector where you want to apply this..
you can adjust the padding to place it at the top(as overline), bottom(underline) or midlle(like strike-through)..
value of text-decoration must be none..
NOTE: if you use the second code.. all links will have that underline image ,. including photos
in album, thumbnails (if sets in thumbnails) and all headshot links.. -----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
if you want the usual text decoration, here are some you can use,.
Value's of text decoration
text-decoration: underline;
text-decoration: overline;
text-decoration: linethrough;
text-decoration: blink;
text-decoration: underline overline;
See original article at Multiply Themes, Layouts and Tutorials site
February 12, 2009
Replacing the usual text decoration on your Multiply themes
Labels:
css,
multiply layouts,
multiply themes,
tips and tricks,
tutorial
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment