Archive for the ‘css’ Category
How to animate a link on mouse over
This effect is much cooler if you use small gifs. I used large images in the Animate link on mouse over example just to make it easier for you to see what I am doing.
When the mouse hovers over the link, you see the animation. When the mouse is not over the link you see a still image. The best examples of this I have seen use small still image as a background, and a copy of that that has sparkles that appear and disappear when the mouse hovers.
You need two gifs; one a still image, and one animated version of that still image:
You can just drag these two images I used to your desktop to play with.
Here is the HTML/CSS for this example:
<html>
<head>
<title>Animated link mouse over example</title>
<style type=”text/css”>
#link {
position: absolute;
top: 100px;
left: 100px;
}
a {
background: url(animate-link-still.gif) no-repeat center;
height: 256px;
width: 256px;
padding: 125px;
}
a:hover{
background: url(animate-link-rotate.gif) no-repeat center;
}
</style>
</head>
<body>
<div id=”link”>
* Note: make the height and width of the link the same as your image size.
Creating horizontal link lists
Suppose you have a list of links:
TimesToCome Mobile
Herselfs AI
Herself’s Houseplants
And you’d prefer to lay them out horizontally on your page like:
TimesToCome Mobile|Herselfs AI|Herself’s Houseplants
Or better yet, like the 3 social bookmark links at the bottom of this post are laid out.
This is especially useful for the list of social bookmarks at the bottom of your page.
You can in HTML just place the links one after the other with a ‘|’ in between. Or you can use CSS to line them up for you and space them out nicely. The float: left; is what makes your list horizontal instead of vertical.
#socialbookmarks ul
{
margin:0;
padding:0;
}
#socialbookmarks li {
float:left;
margin:0;
padding:0;
list-style-type: none;
white-space: nowrap;
}
#socialbookmarks li a
{
list-style-type: none;
padding: 0 18px;
font-size: 0.8em;
text-transform: uppercase;
letter-spacing: 1px;
}
The bookmarks are added in the form of an HTML list to the web page
<div id=”socialbookmarks”>
<ul>
<li> link 1 </li>
<li> link 2 </li>
<li> link 3 </li>
</ul>
</div>
<br />
You need a break ( br ) tag at the end to prevent the links from wrapping if the next item in your template is also a float item.
