Quick Tutorial: CSS Sprites
 

Quick Tutorial: CSS Sprites

http://www.g33ky.com/sprite/

Hello All,

I just threw this page together to test out a method for displaying CSS Sprites. Feel free to check it out. I didn't spend much time doing super-cool icons or code formatting or anything... deal with it (http://www.gofuckyourself.com/images/icons/tongue2.gif), but for those of you who haven't been exposed to sprites before, it may give you some good ideas for your projects.

The concept is, use 1 image for all of your buttons or icons etc... and use CSS positioning to display the various parts of the image. This causes fewer server requests, faster page loading and less code in general. It's easiest if you set these up on a grid in your Photoshop file.

Hope it gives you some ideas.

-V

Nice tut dawg...


When can i expect the css fairies run through?

I only have CSS Rootbeers. :(

Interesting thanks for posting.

Mehhh. I hate fucking with sprites. Nice little sample though.

Official lame thread of the day..

It's called a "contribution":
http://dictionary.reference.com/browse/contribution

con⋅tri⋅bu⋅tion   /ˌkɒntrəˈbyuʃən/ Show Spelled Pronunciation [kon-truh-byoo-shuhn] Show IPA
–noun 1. the act of contributing.
2. something contributed.
3. an article, story, drawing, etc., furnished to a magazine or other publication.

You should try it sometime.

very cool idea

Here's some more info about them and how Yahoo & AOL use them:
http://www.websiteoptimization.com/s...k/css-sprites/

Yup, it's a powerful thing... most "5 star ratings" scripts are done this way, as well as many other scripts involving icons of some sort.

Good thread :thumbsup

damn voodoo, never used sprites before, thanks for the infos! interesting idea.

Good idea.

I code in flash so I would do that in flash.

Hot damn, that's the best explanation I've seen for sprites yet! Thanks for the quick demo!

nicely done :thumbsup

I lurve sprites <3

Very cool, this is new to me. Thanks for sharing. :thumbsup