Yahoo’s Secret Text-Sprite Generator

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Well I’m not sure if it’s a SECRET, but it’s certainly neat and I don’t think they publicize it.

Basically it’s a URL you can hit which will create a perfect sprite-ready PNG graphic of the text you include in the URL. Check it out for yourself:

http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=CSS-Tricks

You can replace the “CSS-Tricks” part of that domain to any text you want. To utilize it, just setup a sprite rollover as normal:

<a href="" id="sprite">
	CSS-Tricks
</a>

In your CSS, reference the background image with the special URL:

a#sprite {
   display: block; 
   background: url(http://l.yimg.com/img.sports.yahoo.com/static/bir/headline?txt=CSS-Tricks) no-repeat bottom center; 
   width: 490px; height: 34px;
   text-indent: -9999px;
}
 
a#sprite:hover {
   background-position: top center;
}

The image generated is always 468x68px and the color is white on top and yellow-orange on the bottom (#efbc21). A bit limiting that way, but still pretty neat. I especially like how it sizes down the text if you go too long.

I wrote up some quick little amatuer jQuery to show it work “live”:

View Demo