#43: How to Use CSS Sprites
CSS Sprites have been a hot topic for a long time now. The fact is that each image on a web page is a separate server request and you can dramatically increase the performance of a page by combining images and reducing that number of requests. In this screencast I’m going to show you how to do exactly that, by taking what would be 8 different images and combining them into one. As an added bonus, we then expand the idea with jQuery and build ourselves a little accordion widget.
Running time: 25 minutes
Direct Download: High Quality, Quicktime .M4V Format (AppleTV Ready)
Links from video:
- CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
- Krystian Morgan (intro video producer)
Get the Flash Player to see this player.
I can't believe people complain about a service that they are getting for free. If you don't have time to watch 1min intro that has been designed for various reasons (i.e Branding) than you can fast forward it. You get intros even with purchased DVDs.
really beautiful!!
I love it
I have added the Demo & Download links to this page, as well as the Downloads section. Have fun!
Thanks again Chris =]
Nice work, today i watched 12, 13, 14 and this one, and I always wish at the end of your cast you would show the final version of all your scripts. I know i can go back and hunt around in the video, but it would be useful. or allow us to download the files you used for the cast as well?
Anyway your intro is good, not too long with some nice graphics, and that's pretty much all you could ask for in an intro.
Was that download files there before? maybe i had gone delirious last night, but if not thanks! i guess thanks either way.
Also, I think the one remaining thing to do is show us how to do the three way toggle. I've tried this without the java script back from 12,13,14 but they never showed how to keep the white state open. I was thinking that it could be seporate .html's but that doesn't really make sense because we're using css. Your site does this, and apple (as someone mentioned above) and almost everyone else, but is it css or javascript? I tried the a:active and it didn't work as you can see at my site where i struggle jonrwilson.com
I just added the download files this morning. Took me a little time to get it together with new artwork that wasn't based on a client job =)
To learn about that active state thing, check out the video "Three State Menu" which goes into that.
very nice intro chris and thanks for css sprites
Another example of good sprite use is Ask.com:
http://sp.ask.com/sh/i/a11/hp/hp_sprite.png
Also, if you check out Ask.com through the wayback-machine you can even get a page with even bigger sprite-usage.
Awesome intro!
awesome! congratulation. Very good videoCast!
Hey Chris, another great screencast. I wrote an article earlier that week that I posted on the same day but you win with the video cast :( haha- link is here – http://www.lightpostcreative.com/image-sprites-tu...
This was very interesting. I just watched this one and the latest psd to html screencast.
Thanks for your hard work.
Great tutorial! I hope you make more simple jQuery tutorials in the future.
Great Video. You've definitely got something here. I look forward to checking out more of these.
hey very good SC man thanks for that technique
Awesome article. I had read a couple of articles about css sprites before, and gotta say this is the best by far. You really explained the point of using sprites and used an excellent example.
Thanks Chris, I really enjoy your tutorials and screencasts. CSS Tricks is top among my favorite sites. btw, the new intro is really cool.
I thought the video was great. I have been using CSS sprites for awhile for hover and active states. Didn’t realize how easy it was to add the jquery. Thanks for this video and all the others that you take time to produce. This is one of the sites I recommend for anyone looking for help with CSS.
Hi Chris, Tricks the best Tutorials on the web for the web! Keep on good health, nothing more nothing less. All the best the 2009 right up to 2999, we leave something for the negative margins. Chao amigo!
Hey man, this video is great, thanks for your time!!
and yeea, the new intro is awsome !!
And I want to say…”Congratullations” for you new Web Re-Design.
Iam a new user of this site!!
Saludos desde Mexico!