Yahoo’s Secret Text-Sprite Generator
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 ...
1
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.
Comment by Chad — June 16, 2008 @ 4:22 pm
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.
Comment by Tim Wright — June 16, 2008 @ 5:13 pm
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!
Comment by kristarella — June 16, 2008 @ 7:28 pm
4
I doubt this is intended for public usage, but a nice find nonetheless =)
Comment by Tom J Nowell — June 16, 2008 @ 10:09 pm
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?
Comment by -Martin- — June 16, 2008 @ 11:30 pm
6
This is ridiculously easy to make, PHP uses the GD library.
Think of all those ticker banners people use (like Lilypie.com).
Comment by Niobe — June 17, 2008 @ 12:29 am
7
@Martin: I’d really love to know more about that
Comment by Germán — June 17, 2008 @ 5:12 am
8
This is kinda neat. I’ve always just used css-sprite.com. LOL.
Comment by Erika — June 17, 2008 @ 8:26 am
9
Looks like they’re using DTR (Dynamic Text Replacement).
http://www.artypapers.com/csshelppile/pcdtr/
It is VERY cool!
Comment by kristen — June 17, 2008 @ 9:33 am
10
I look first. This is interesting and I added my blog. Thank you.
Comment by taylan — June 17, 2008 @ 10:50 am
11
@Germán:
I’m making a tutorial
Comment by -Martin- — June 17, 2008 @ 10:55 am
12
@Martin:
Thank you!
Nice & Clean.
Great! I’m designer… so PHP is not my thing… hehe
I like your site by the way
Greets
Comment by Germán — June 17, 2008 @ 11:01 am
13
This is very useful, but I would love to see something with more options… font, colors, etc etc.
Comment by David — June 23, 2008 @ 10:38 am
14
Uh … I’ve been doing this for several years now already
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.
Comment by Rajeev J Sebastian — July 8, 2008 @ 6:57 am