Hover over the yellow note to see how it changes. Example bitmap for the hover menu sprite:
<html>
<head>
<!-- name of the file is testCSS3.html -->
<style type="text/css">
#menu {
list-style: none;
width: 164px;
height: 155px;
background: url(images1/yellownote.png) no-repeat;
position: relative;
}
#menu span {
display: none;
}
#menu a {
display: block;
position: absolute;
outline: none;
width: 126px;
height: 50px;
left: 12px;
}
#menu a:hover {
background-position: 0 top;
}
#menu .things {
/* width: 126px; height: 50px; left: 12px; coming from "#menu a"
for .things, .notes, .posts, .calendar
*/
background: url(images1/things.png) -126px top no-repeat;
top: 8px;
}
#menu .notes {
background: url(images1/notes.png) -126px top no-repeat;
top: 40px;
}
#menu .posts {
background: url(images1/posts.png) -126px top no-repeat;
top: 68px;
}
#menu .calendar{
background: url(images1/calendar.png) -126px top no-repeat;
top: 105px;
}
</style>
</head>
<body>
<ul id="menu">
<li><a href="#" class="things"> <span>Things</span></a></li>
<li><a href="#" class="notes"> <span>Notes</span></a></li>
<li><a href="#" class="posts"> <span>Posts</span></a></li>
<li><a href="#" class="calendar"> <span>Calendar</span></a></li>
</ul>
</body>
</html> 
Posts
5 comments:
I agree with you. This post is truly inspiring. I like your post and everything
you share with us is current and very informative, I want to bookmark the page
so I can return here from you that you have done a fantastic job ...
Thanks a lot for this stuff!
good morning, I sent an email to you about this post, its not coming thru for me. Can you connect with me when you get a chance.
Hi, I've looked at my email but could not find a message from you. Do you mind resending it? Thanks.
Can you please write more blog entries on this subject, its a request, because after reading your blog I am highly interested in learning more.
Post a Comment
Note: Only a member of this blog may post a comment.