Exactly How to Use CSS Spritesvideos

Exactly How to Use CSS Sprites

DiggThis

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.


Related Posts

Add Comment

Discussion 78 Comments

Comment Page 3 of 3 1 2 3
  1. Jack F says:

    Good tutorial but spent too much time in Ps IMO, I was expecting more analysis of the CSS techniques, but still enjoyed it.

  2. iFoneApps says:

    Hey very nice video! good job !

  3. rachid says:

    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 !

  4. Another great screencast. I think this is a nice addition to the already available articles on the subject.

  5. Bill says:

    AWESOMEEEE !!!!

  6. 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¢

  7. Nicole says:

    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.

  8. Leeiio says:

    Nice work and nice video,Thanx so much!

  9. chad says:

    i’ve seen apple’s nav. you made it look super simple. nice technique! thanks.

  10. Piyal Kundu says:

    Thanks a lot. Nice tutorial. Do it have a negative side ?

  11. Anshu says:

    Instead of cropping, it might be much easier to trim off all transparent pixels instead.

  12. ETmedia says:

    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

  13. SissyFoo says:

    You don’t sound hispanic

  14. Jonathon says:

    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!!!

  15. Sokun says:

    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.

  16. Great post thanks! I am thinking of writing one on sprites for icons also. Joomla do it well :)

  17. MexiChriS says:

    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.

  18. Does anyone have an resources on how to do a CSS Menu using sprites, but also have nested dropdown menus?

  19. Great post thanks!

  20. Fayat says:

    Good Show, this is what I was looking for. thanks

  21. Kayla says:

    This screencast was needed! Articles on this subject can get so confusing. This helped me out a lot, thank you.

  22. sunnybear says:

    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).

  23. Demo link not working? is there a probleme?

  24. markinyan says:

    Interesting, interesting. It started me to think of me css writing skills.

  25. Retnuh says:

    Great Tut!

  26. Noushad says:

    Great….Very interesting..

  27. satya says:

    Thanks for great tutorial.

Comment Page 2 of 2 1 2

Add a Comment