Today, Andres will be teaching us how to use CSS sprites to improve load times and decrease the number of HTTP requests that are made. As always, feel free to ask any questions in the comments area.
- Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Andres Fernandez
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
LivingDesign - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Good tutorial but spent too much time in Ps IMO, I was expecting more analysis of the CSS techniques, but still enjoyed it.
Hey very nice video! good job !
you could have saved a lot of time if you had escaped the photoshop part !
it’s a css tut !
good to know ! thank you !
Another great screencast. I think this is a nice addition to the already available articles on the subject.
AWESOMEEEE !!!!
Excellent tutorial! Very well done.
But don’t waste your time doing it manually!
Instead, just go use the automatic CSS sprite generator and save yourself loads of time.
It automatically generates a background image and all the CSS required and it’s very configurable.
Just my 2¢
I have used CSS Sprites before, but that was years ago. It’s a good way to slow down website loading times, but only if you absolutely need it. In some ways, it won’t matter, but in other times it will.
Nice work and nice video,Thanx so much!
i’ve seen apple’s nav. you made it look super simple. nice technique! thanks.
Thanks a lot. Nice tutorial. Do it have a negative side ?
Instead of cropping, it might be much easier to trim off all transparent pixels instead.
I can’t get this to work can somebody help me?
Here is a zip of it:
http://www.filefactory.com/file/af7gg3h/n/webnavtest_zip
Text on menu is in norwegian but basically says:
logo=home, blog, gallery, contact, webshop
You don’t sound hispanic
i have seriously tried 10 different tutorials and have not been able to get my sprites to work correctly.
finally, after viewing and dissecting yours, i have them nailed
thanks so much!!!
This technique is good but it is not flexible. I mean if you wanna add one more menu, say “download”, then you need to change almost the whole things. We need to find a better way.
Great post thanks! I am thinking of writing one on sprites for icons also. Joomla do it well
This is really great, making a navigation/menu for my aunt’s real estate business at the moment, saw this and didn’t know a thing about it. In the end, totally decided to go with this process. Great post, enjoyed it a lot and got a few lil tricks from you! Thanks a lot!
@Sokun, yea it would be a hassle to re-add a new menu, but the whole process and flow of this is flawless and amazing. That’s what makes it unique and useful.
Does anyone have an resources on how to do a CSS Menu using sprites, but also have nested dropdown menus?
Great post thanks!
Good Show, this is what I was looking for. thanks
This screencast was needed! Articles on this subject can get so confusing. This helped me out a lot, thank you.
If you have troubles with CSS Sprites you can try to use automated tool for website acceleration – Web Optimizer ( http://code.google.com/p/web-optimizator/ ). It also includes the best CSS Sprites merging techniques (in automatic mode).
Css sprite Generator, The Top 4 CSS sprite generator::
http://ledomoon.blogspot.com/2009/10/css-sprite-generator-top-4-css-sprite.html
Demo link not working? is there a probleme?
Interesting, interesting. It started me to think of me css writing skills.
Great Tut!
Great….Very interesting..
Thanks for great tutorial.