Archive for the ‘css’ Category
CSS Hover tips…
A previous professor of mine is still teaching me even though I am no longer in her class. I just learned a valuable CSS hover tip from the awesome Jennifer Campion of Interface Technical Training.
Normally in CSS when using Anchor Pseudo-classes you would have link 4 states.
- a:link (equals the unvisited link state)
- a:visited (equals the visited link state)
- a:hover (equals the mouse over/hover link state)
- a:active (equals the selected link state)
For the most part I would use a:link, a:visited and a:hover. However, when using it for a hover button I would only need to use a:link and a:hover. Which required two images. Well from what I recently learned, this is not the case anymore. Now you will only need to maintain one image file.
Before: two images
[Active image] 64X63
[Mouse over/Hover image] 64X63
Now: one image
[Active/Hover image all in one] 128X63
Notice the a#hovertest:hover on line 9 of the CSS file.
background-position: 64px 0;
It basically means on hover jump to the 64th pixel of the horizontal position and to the 0 pixel of the vertical position. Below is the zoomed in version of the all-in-one graphic to illustrate the horizontal and vertical positions.
[Zoomed Image]
Video Tip In Action
Written by Samson Loo
October 6, 2008 at 2:46 am
Posted in asp.net, css, hover button, web