Holy Sprites
Lots of folks joined in on the fun with the Show Off Your Sprites! contest. I used the ol’ random number generator and came up with Lee Kowalkowski as the big winner, congrats Lee! Now let’s take a look at some of the submissions. Looking at sprites I find strangely fascinating. It’s like this strange secret language of the web that only us performance nerds really understand =)
Some of these may have been cropped or resized. They aren’t meant to be taken and used, I just hope they serve as an inspirational spark!
If you just look through all these and were like “Uhmm, what the heck was that?” Those are called CSS Sprites and you can learn about them here.
Loving the Prince of Persia one :D
Absolutely!!!
Where does the Prince of Persia come from?
Persia.
Oh dear, that made me laugh.
Perfect answer! Made my day! Thanks!
Technically, it’s Iran now.
i think he meant from which website. but yes thats a funny question/answer if that was what he was wondering.
Don’t hold out on us! it would be great if you could link each sprite to their websites so we could see them in use. Cheers
It came from a very old video game of the same name (The Prince of Persia) from the 80s. Sadly I’m old enough to have fond memories of playing it as a child ;)
This is also where the term ‘sprite’ comes from incidentally
Tee-hee.
Great post, it’s awesome to see how often sprites are used!
I was under the impression that sprites were most useful for items with different states (active, hover, visited) etc… I had no idea that people can, and do, use this technique for the majority of their small layout elements.
Awesome collection.
Liking the Warsprite & prince of persia, the prince one must have taken lots of time to make. And then there is mine the first one ;) , wish i could have won that book :D
I’d have to agree the Prince of Persia one is my favourite… I think that’s because it brings back such fond memories though not sure why since I stunk at the game.
They do all look good though
Please share the site where we can see this ‘Prince of Persia’ actually in use. This looks awesome.
Sprites are really cool, if someone wants to check mine: http://indiepaper.com/images/indiepaper2/container_bg.png
Anyways, nice idea for a contest (though, I didn’t see it on the index, was it posted somewhere else?)
Sprites are certainly cool… and apparently have come a long way!
But here’s my question: how in the world do you (easily?) setup/remember/control the necessary positioning when creating a sprite like these?
I have a hard enough time dealing with a simple 2 or 3-state sprite for a button mouseover… I can’t imagine being able to quickly/easily setup the positioning for these!!!! =:O
With a program like Photoshop, it’s not that hard. You can easily modify any part of the sprite as long as you don’t move it much, and your CSS should be cleanly written to show each part of it.
Most of the times, you don’t rearrange your sprite unless you’re making over a part of your site, so then you’d pretty much find the states over again. I use my own techniques (using photoshop ruler, cropping) to find the coordinates, but to get it pixel right, I also use web developer toolbar and the edit CSS option.
Sometimes I find useful to use Firebug and inspect the element with the background. Then you can click on the px value and use the arrow keys (up or down) to change the value up or down.
Thanks for including mine, Chris!
Someone should create a CSS Gallery-like site for us Sprite Nerds.
Perfect!
if contents the url they come from, will be better~
Nice…
Does anyone know if more horizontal (wider) sprites are more efficient than vertical (taller) sprites? Are there advantages of one over the other?
I don’t think it matters. Pixels are pixels, in any direction.
Perhaps it’s obvious, but don’t go both ways either. Try and pack as much as you can into as little surface area as you can. Going really wide and really tall and leaving empty space is counter-productive.
Was really cool to see the WAR navigation buttons I created featured on here. Thanks!
Thanks,that’s what I am looking for
I did my first sprite on friday and I’m totally excited about doing them for all my sites from now on :-)
SELL MAINE TO CANADA.
HAHA
Great stuff.
wow nice collections of sprites :D