advanced code snippet search

Posted By

Moonsheeld on 11/18/10


Tagged

Sprites


Versions (?)

Accessible sprites

 / Published in: CSS
 

CSS sprites still accessible when images are disabled. As seen on http://ryanroberts.co.uk/_dev/experiments/accessible-rollovers/index.html . Disabled the "overflow: hidden" part to make the sprite accessible when images disabled AND text is zoomed.

Expand | Embed | Plain Text 
  1. /*
  2.     HTML:
  3.     <a href="#"><span></span>My hidden text</a>
  4. */
  5.  
  6. a {
  7.     display: block;
  8.     position: relative;
  9.     width: Xpx;
  10.     height: Xpx;
  11. }
  12. a span {
  13.     position: absolute;
  14.     top: 0;
  15.     left: 0;
  16.     display: block;
  17.     width: 100%;
  18.     height: 100%;
  19.     background: url(sprite.png) no-repeat 0 0;
  20. }

Report this snippet  

You need to login to post a comment.