Yahoo’s Secret Text-Sprite Generator
* 6/16/2008 — 26 Comments *
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 468×68px 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”:
Loading ...
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.
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.
Yeah Yahoo!’s hacker culture continues till today & i believe hackers prefer remaining unknown :)
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!
I doubt this is intended for public usage, but a nice find nonetheless =)
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?
This is ridiculously easy to make, PHP uses the GD library.
Think of all those ticker banners people use (like Lilypie.com).
@Martin: I’d really love to know more about that :)
This is kinda neat. I’ve always just used css-sprite.com. LOL.
Looks like they’re using DTR (Dynamic Text Replacement).
http://www.artypapers.com/csshelppile/pcdtr/
It is VERY cool!
I look first. This is interesting and I added my blog. Thank you.
@Germán:
I’m making a tutorial :)
@Martin:
Great! I’m designer… so PHP is not my thing… hehe :) Thank you!
I like your site by the way ;) Nice & Clean.
Greets
This is very useful, but I would love to see something with more options… font, colors, etc etc.
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.