Grow your CSS skills. Land your dream job.

Yahoo’s Secret Text-Sprite Generator

Published by Chris Coyier

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

Comments

  1. Permalink to comment#

    Looks like that’s how they’re dynamically writing the headline for the main photo on this page: http://sports.yahoo.com. It would be nice to know how they create the image on the server side using PHP or something.
    If it was a small bit of PHP it would be a nice alternative to FIR for fancy text.

  2. That’s pretty cool stuff. Yahoo has some very good developers, they just don’t seem to get as much press as the guys over at Google.

  3. I’ve only received two articles since being subscribed to your blog, but already loving it. Almost unrelated to Yahoo – using text-indent to get rid of the text in the link! I’ve used sprites for hover navigation before, but it was inside a div with a height that wouldn’t get stretched and I could move the background… I used padding to get rid of the text. It wouldn’t work when I tried it recently. I’ll have to try text-indent next time!

  4. I doubt this is intended for public usage, but a nice find nonetheless =)

  5. I’ve made made something similar a month ago. Powered by PHP and jQuery to replace all headlines with the correct image, a little more dynamic than this one :)
    I can share if someone is intrested?

  6. Niobe
    Permalink to comment#

    This is ridiculously easy to make, PHP uses the GD library.
    Think of all those ticker banners people use (like Lilypie.com).

  7. Germán
    Permalink to comment#

    @Martin: I’d really love to know more about that :)

  8. This is kinda neat. I’ve always just used css-sprite.com. LOL.

  9. kristen
    Permalink to comment#

    Looks like they’re using DTR (Dynamic Text Replacement).

    http://www.artypapers.com/csshelppile/pcdtr/

    It is VERY cool!

  10. I look first. This is interesting and I added my blog. Thank you.

  11. @Germán:
    I’m making a tutorial :)

  12. Germán
    Permalink to comment#

    @Martin:
    Great! I’m designer… so PHP is not my thing… hehe :) Thank you!
    I like your site by the way ;) Nice & Clean.
    Greets

  13. This is very useful, but I would love to see something with more options… font, colors, etc etc.

  14. Rajeev J Sebastian

    Uh … I’ve been doing this for several years now already :P

    For languages/scripts such as Malayalam, the lack of proper support in most browsers forces us poor folks to use such techniques to render text usefully.

  15. Reduced appetite enables one to take less food, which restricts fat to enter into body.
    This may possibly lead to an addiction if the doses of Phentermine arre used in substantial
    quantities. The panel also described concerns over
    its long term cardiovascular effect, something that has come to
    be a major component in the recall of major diet pills in
    the past.

    low carb diet

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".