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:

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">

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

a#sprite {
   display: block; 
   background: url( 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