CSS - Web Design: trick make up link navigation with blink imageTag: css, web design Category: CSS
post: 09 Nov 2007 read: 1,224
You can see link in categories block in this site. When your mouse over that link, image beside link will be more light. It is simple trick with css. I will explain step by step how do I make this link.
I use Adobe Fireworks CS3, but you can other image editor. Follow the steps:
- Open Fireworks. Create new document by click File > New on menu. You will get dialog box.
- Define item at dialog box like following images (16 X 100 px, transparent):
Click Ok button.
- Put your small icon (ex. 14 X 11 px) on top of document. Position Y:4, X:1 ( or make sure the image on center position ).
- Click the image (small icon).
- Change opacity, will be 60.
- Put again the same small icon on bottom of document. Position Y:84.
- In Optimize, define item value like following image:
- Save and named "icon_folder.gif".
- Create a new file, named "test-css.html". Enter following code:
<html>
<head>
</head>
<body>
<a href="#" id="category">CSS</a>
</body>
</html>
This is basic html. We use id named "category".
- Insert following css ( see bold code ):
<html>
<head>
<style type="text/css">
<!--
#category {
text-decoration:none;
color:#FF6600;
padding-left:20px;
background: no-repeat url(icon_folder.gif);
background-position:0px 0px;
}
#category:hover {
color:#FF0000;
text-decoration:underline;
background-position:0px -80px;
}
-->
</style>
</head>
<body>
<a href="#" id="category">CSS</a>
</body>
</html>
|
|
| Give Your Opinion | Recommend
|
