Show Off Your Sprites!

by: Chris Coyier

Oct 26 2009
197

I just updated my old CSS Sprites article yesterday, and I thought it would be kind of fun to ask everyone to share sprites that they have created themselves. Let's make a quick giveaway out of it too!

I've finished my copy of Dan Cederholm's Handcrafted CSS, which was very good. My copy is now of course slightly used, but I figured why not pass it on to someone else who can learn from it. It's the version that comes with the DVD video as well. I'll choose one random person to send it to.

To enter, just leave a link in the comments below directly linking to your sprite image. If you have never created a sprite, find an interesting one on the web and link directly to that. Make sure to leave your real email when commenting so I can contact you if you win. I'll select a winner next week.

If you are thinking you are going to try and find a sprite elsewhere, but don't know how, I'd suggest using Firebug. Pop it open and mouse around things on the site, trying to find things that use background images. Hover over the URL path to the background image and see if there is more than meets the eye going on. This is one of mine looks like in Firebug:

Subscribe to The Thread

  1. Philipp Schmitt

    The Facebook Sprite. Everything in one place ;)

    http://www.facebook.com/rsrc.php/z136G/hash/3ay18ob4.png

    • Ryan

      LOL Thats funny

    • euan

      this once has to win

    • Thad Bloom

      This is like the one I posted further down. I was thinking about making some kind of crazy template utilizing sprites like this.

  2. Daniel Groves

    When does this contest end?
    I’m working on a new site now which I plan to use sprites in. I mean, to the level where I will only have on image on the whole site which I would love to use for this.
    The site should be ready tomorrow evening.

  3. Debasish panda

    I have one right here.

    http://debasish.org/demo/traffikwise/assets/sprite-main.png

    Still not finished, working on it :)

  4. Vincent Re

    Google has a good sprite – http://www.google.com/images/nav_logo7.png

  5. Ken

    Chris- I followed your screencasts to make this WP site from scratch (using Starkers)
    http://stevebrodner.com/
    I had never done sprite images either, so this was also a first.
    http://stevebrodner.com/images/menu_art.jpg
    (I want to comment here about what a brilliant artist, illustrator and political commentator Steve is, but I guess that is not what this is about)
    Normally I like using html for the nav, but in giving Steve a unique design, I wanted to use his lettering.
    Ken
    PS I hope you are very happy today after Favre/Vikes did not win but your beloved Pack did.

  6. Catalin

    Dragon interactive navigation sprite:

    http://dragoninteractive.com/lib/i/navigation/sprite.jpg

  7. Andi

    Not an image but a pretty good on-line tool for creating them.

    http://spriteme.org/

    • Trever

      Andi,
      That is pretty cool. I have always just hand built them and then did a little trial and error.

    • David

      Try using that on Digg.com… 6 requests and 77k saved, and the resulting sprite is very impressive…

  8. Eberth M

    From dragon interactive site:

    http://dragoninteractive.com/lib/i/navigation/sprite.jpg
    http://dragoninteractive.com/lib/i/subnavigation/sprite.jpg

  9. Ian Storm Taylor

    Here is one of my own for an old design I had:

    http://stormink.net/images/STORMINKspriteOLD.png

  10. Jon Hunt

    Apple menu sprite
    http://images.apple.com/global/nav/images/globalnavbg.png

  11. Eddie

    From the Yahoo! Sports site:

    http://l.yimg.com/a/lib/uh/15/sprites/sports_gray-1.0.0.png

  12. Atom

    INSight Design Conference Nav Sprite:

    http://www.insightdesignconference.com/img/bg_navigation.png

  13. Greg

    Here’s two from the navigation on two of my sites:
    http://www.thedesigned.com/wp-content/themes/thedesigned-v2/images/bg-nav.gif
    http://www.submitcss.com/wp-content/themes/SubmitCss-v4/images/bg-navigation.gif

    And here’s one I like that Digg uses:
    http://digg.com/img/menu-current.gif

  14. René

    This is a small sprite for my social media links on my portfolio website.

    http://www.renepolitiek.nl/img/social-media-logos.png

  15. tommy

    Simple social networking sprite I made for a client using WP:
    http://www.studio8.net/wp-content/themes/studio8dotnet/images/socialbuttons.png

  16. Guillaume

    I’m not entering the contest with this, but
    jQuery UI ThemeRoller sprite is really nice.

  17. Jônatan Fróes

    http://www.henryfroes.com/jonatan/goiano/images/all_tops.jpg

    slider of this theme : http://migre.me/9Wqa

  18. Melissa

    Amazon used to have a more intense sprite than this, I thought, but it’s still pretty nice!

    http://g-ecx.images-amazon.com/images/G/01/gno/images/orangeBlue/navPackedSprites_v12._V222883957_.png

  19. Paul Randall

    This sprite from Yahoo is pretty impressive: http://farm4.static.flickr.com/3548/3366898583_e6a4c551ec_o.png

  20. Guy

    Hey from the west coast. Here’s my personal portfolio. Just started using sprites as of yesterday for my dynamic dropdown navigation. Loads 7x faster… Amazing.. I didn’t even know what a Sprite was until I read your article. Thanks. :)

    http://www.guylepage.info/images/work.png

  21. Lee Kowalkowski

    Mine’s at http://www.adeledecaso.com/style/tab.png which does the tabs for http://www.adeledecaso.com. It uses a mix of repeating and non-repeating parts to do the tabbed navigation over a simple UL.

  22. curtisblackwell

    my navbar uses sprites.

    http://curtisblackwell.com/

  23. Pete Haughie

    http://www.cyclingnews.com/i/sprite.png

    Yes, it’s mine. It’s not 100% of the site though.
    I’m not working for the company anymore though.

  24. Pedro D.

    Yahoo! India http://l.yimg.com/t/img/1226894530icons_sprite3.gif
    Yahoo! Shopping http://l.yimg.com/a/i/us/sh/topshop08/sprite_040208_8bit.png

    It looks like all Yahoo!’s sites use sprites…

  25. Peer Pressure Creative

    Here’s the sprite for http://www.peerpressurecreative.com

    http://www.peerpressurecreative.com/images/sprite.png

  26. Hamza Oza

    http://images.apple.com/global/nav/images/globalnavbg.png

    It belongs to apple but thats where I first learnt about the concept.

  27. Marco

    I use several sprites on my website. This is a cool one with a “hover” state and 3 buttons:
    http://www.marcofolio.net/templates/marcofolio2/images/tech-icons.png

    Nice going Chris!

  28. Dungol

    Blog by Thomas Olausson
    http://www.ultravoid.com/wordpress/?p=101

  29. Paul Armstrong

    Here’s one of mine for all of the misc icons on my site:
    icons.png

  30. Sai-Kit Hui

    May I interest you in some silhouettes?

    http://areyoudesign.com/blog/wp-content/themes/Invitation%20to%20the%20Crazytrain/images/date.png

  31. Dungol

    Blog by Thomas Olausson
    http://ultravoid.com/test-nav/#grapefruit
    http://ultravoid.com/test-nav/menu-nav.png

  32. Shut Pavel

    My sprite from http://turgrad.by (header navigation).

    http://turgrad.by/sites/all/themes/turgrad/img/hdr-bgs.png

  33. Grant

    Alice Cooper’s Navigation:
    http://www.alicecooper.com/images/template/ALI_nav.png

  34. Jesse

    YouTube’s massive sprite:
    http://s.ytimg.com/yt/img/master-vfl125983.png

  35. Pedro Ivo

    A good sprite from Warhammer Online website:

    - http://mythicmktg.fileburst.com/war/us/en/global/images/new-nav_matrix.gif

    • Liam Goodacre

      That’s a bit much isn’t it, it could be 2/5′s of the size.

  36. Gilbert

    Here is the sprite I made for makesometime.com

    http://makesometime.com/system/application/views/images/Sprite.png

  37. Mike Sawicki

    From a site I manage.

    http://www.dublin.oh.us/recreation/images/all-icons.png

  38. Gargron

    My blog header at Anime² uses a sprite. (Our tagline is ‘we love maids’, and we actually belong to the ani-blogosphere rather then the design-o-blogosphere, so don’t wonder, that explains our mascot ^^ )

    http://anime2.kokidokom.net/wp-content/themes/whitespacedtypography/images/header-maid-mizugi.png

  39. PeTiNgA

    This one is from SAPO Homepage used in backgrounds.

    http://h.s.sl.pt/imgs/imgs.gif

  40. A.Fruit

    This site I Des/Dev’d that uses sprites on the nav:

    http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btn-map.jpg

    http://www.thelyndale.com

  41. Chao

    This is from Rachael Taylor Designs
    http://www.rachaeltaylordesigns.co.uk/assets/css/images/rachaeltaylordesigns_menu.png

  42. A.Fruit

    Whoops that was the wrong image [above].
    Here it is:

    http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btns-nav.jpg

  43. Baylor Rae'

    Tutorial9 Has a neat sprite for their navigation
    http://tutorial9.s3.amazonaws.com/themes/stylesheets/images/tab-sprites.jpg

    CSS-Tricks has an awesome sprite
    http://images.css-tricks.com/theme-4/css-tricks.png

    Chris Spooner’s sprite covers a few subscribing methods and miscellaneous items.
    http://blogspoon.s3.amazonaws.com/wp-content/themes/SpoonGraphics_V4/images/sprite.png

    And last, Apple’s navigation sprite
    http://images.apple.com/global/nav/images/globalnavbg.png

    • Baylor Rae'

      I’m sorry my previous comment looks like a list of links with a poorly descriptive title, but there isn’t an easy way to make a list to a couple sprite images interesting.

  44. Frank Ronny Larsen

    Made this one for the stadium overview of our supporterspage a while ago:
    http://www.isberget.no/uploads/images/stadionkart/all.jpg

    Used on http://www.isberget.no/tromso-il/alfheim

  45. J. Albert Bowden II

    http://borkweb.com/playground/sprite/sprite_sheets/running_megaman.png
    not mine but this megaman sprite has to be one of the best ever. you can see it in play here.
    http://borkweb.com/playground/sprite/sprite.html
    megaman ftw!
    cheers,
    albert

  46. Ricardo Zea

    Here are three image sprites of two websites I’m working on right now, the sites are not live yet though:

    1. http://www.ricardozea.net/sprites/bg-sprites.png
    2. http://www.ricardozea.net/sprites/img-sprites.png
    3. http://www.ricardozea.net/sprites/bg-frame.png

  47. Christian Ross

    A realtor client’s site: http://www.soprisrealty.com/images/button-sprite.png

  48. Andy Kleeman

    Not the most exciting but in the interest of winning, here is one I’ve used for a site… http://www.seven-acres.co.uk/images/menuSprite.png

  49. TJ Mapes

    Here is mine from RIPT Apaprel (http://riptapparel.com)

    http://riptapparel.com/ript/wp-content/themes/riptTheme/images/navBG.jpg

  50. Tom Hermans

    sprite used in my site (http://www.imagomedia.be):

    http://www.imagomedia.be/wp-content/themes/imagomedia_juli09/img/buttons_sprite.gif

  51. David Rojas

    Sprite from my site header navigation: http://www.davidrojas.net/wp-content/themes/davidrojasv2/images/menu.png

  52. Rulerificate

    http://cymweb.com.ar/images/menu.jpg

  53. Ted Goas

    I have a few sprites on my site, but here are the three main ones:

    Small Social Icons:
    http://www.tedgoas.com/wp-content/themes/brown-archer/images/bg-sm-icons.png

    Homepage Icons:
    http://www.tedgoas.com/wp-content/themes/brown-archer/images/icn-how.png

    And the main navigation:
    http://www.tedgoas.com/wp-content/themes/brown-archer/images/bg-nav.png

  54. Grant Z

    Here’s mine: http://media.lib.byu.edu/images/hbll/li_buttons.jpg. A sprite i made for a wordpress site at the library I work for.

  55. gooflett

    OBEY YOUR THIRST! – Sprite

  56. Jesse

    Here’s one of my little ones off of my portfolio website: http://www.racinewebworks.com/img/icons/sprite.png

  57. Tim Wright

    New sprite: http://www.csskarma.com/img/sprite.jpg

  58. euan

    Myspace Search Sprite

    A lot there.

  59. Mary H.

    Here’s a simple one I’m using on a site (still in development): http://advantage-media.com/newsite/images/nav.gif.

  60. Eric B.

    I haven’t used CSS sprites that much, but here are the ones that I use for a few icons.
    http://fwebde.com/wp-content/themes/fwebde2/images/icons.png

  61. Peter Mathes

    Google.cn has a nice little animation at the frontpage.
    http://www.google.cn/intl/zh-CN/images/toolbar_animation_20090618.png

  62. Dave Vogler

    Great idea.

    Here’s mine:

    http://www.sparkhouse.com/sites/all/themes/sparkzen/images/nav_pri_bg.gif

    I’m looking forward to seeing a good list here.

  63. eGGzy

    Deviant art
    http://st.deviantart.net/minish/gruzecontrol/icons-small-modules.gif?6

  64. pepelsbey

    http://pepelsbey.net/wp-content/themes/pepelsbey/i/graphics.png

  65. Matt

    First (and only so far) attempt at sprites for a new blog design I’m working on:

    http://matte.ws/wp-content/themes/two/images/icons-black.jpg

    Haven’t tried anything as complex as the Facebook sprite, but it would be interesting to try on an upcoming project

  66. Adam

    This is the sprite I created for a Javascript countdown timer, it worked so well!

    http://www.quinnipiacbobcats.com/fls/17500/madness/images/countdown_sprite.gif

    • Jason

      That is awesome, how did you do that?

  67. John Briggs

    I’ve got two:
    1. http://stabilitynetworks.valitics.com/images/cssimg/4ways_spr.png
    2. http://youasparent.com/images/cssimg/nav_sprite.png

    Both are my own, the first one is in the process of launching and the second is on a site already live.

  68. Retardikas

    here is a small one from my site

    http://wsdesign.bestnoise.com/wp-content/themes/wsdesign2/style/images/rss-image-sprites.jpg

  69. jason

    from china
    https://img.alipay.com/pa/page/index/bg.png

  70. koew

    From my (outdated) blog-design:

    http://koew.net/blog/wp-content/themes/AllPraiseToCoffee/images/aptc_sprite_03.png

    Notice the easter egg I made just for curious users! ;)

  71. Adam

    From TheCampusList

    http://www.thecampuslist.com/images/master-images.png

  72. Martin Lenngren

    Here is one that I made for Svensk Handel http://www.svenskhandel.se/styles/images/spritesmap.png

    I would love to get that book!

  73. Alex

    There is a nice one here. Not mine though. http://dragoninteractive.com/lib/i/navigation/sprite.jpg

  74. Brian Scroggins

    Navigation for a spec site we are still working on.

    http://www.kandsadv.com/stellar/IMAGES/navigationBar.jpg

  75. Soma

    From Jquery Theme Roller:

    Themeroller Sprite

    One small one I did for a website:

    http://www.schweizer-illustrierte.ch/_img/media_buttons_all2.gif

  76. Kyle

    Amazon’s sprite

    Small navigation sprite

  77. Cesar Figueroa

    Here’s a download one I made, it’s pretty innocent but gets the job done.

    http://cssaid.com/images/download.png

  78. Dan O

    I picked up on sprites by reading this blog. Here’s a simple sprite image to create a neat button effect:
    http://dano-dna.com/images/portfolio-sprites-dimaging.gif

  79. Forrest

    I created several of them for this client:

    http://waterscapespro.com/

  80. simto77

    My first CSS sprite:

  81. simto77

    here it is:
    http://www.figurinesthedetour.dk

  82. Duane Neveu

    This one is used in the footer of a live site of mine for Smoke & Spice Southern Barbeque in Ontario Canada!

    It’s not a terribly involved sprite, but it’s all mine…LOL.

    http://smokenspice.com/images/partners.png

    To use a term of Chris’, this sprite is “gridular”, in that I kept the transition pics aligned so there was less to change in the CSS.

  83. Whitney Luna

    Here is a simple one: http://www.getascent.com/app/views/site/images/bg-images.png

    Used for this Scentsy site: http://www.GetaScent.com

  84. Leif Miltenberger

    I used a sprite for the jQuery sliding carousel in the footer of http://www.driftwoodbeer.com. Here’s the sprite image: http://driftwoodbeer.com/wp-content/themes/driftwood2/images/jcarousel-sprite.png

  85. Kyle

    My favorite sprites:

    Mobile Me, Electronic Arts, and Fantasy Interactive.

  86. webbografico

    Here’s the one from the whitehouse.gov main navigation:

    http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif

  87. Chris

    Here is a sprite I set up for a navigation design:
    http://www.24-7ministries.org/images/buttons.gif

    You can try it out here, on the right:
    http://www.24-7ministries.org/

  88. d'sixTein

    My website is curently under construction, but I was interested to join this contest. I have one sprite, please check this out http://www.sixtein.web.id/images/images.gif

    BTW, I’m apologize, my english is not so good xD

  89. Frederik Højlund

    My own:
    http://fred-art.dk/Fred-art.dk2/images/graphics/navigation_sprite.png

    Kontain.com uses a lot of very good sprites:

    http://static2.kontain.com/1_0_3_0/css/assets/sprite_login.png

    http://static2.kontain.com/1_0_3_0/css/assets/sprite_header.png

    http://static1.kontain.com/1_0_3_0/css/assets/bg.png

    http://static3.kontain.com/1_0_3_0/css/assets/sprite_icons.png

    http://static3.kontain.com/1_0_3_0/css/assets/sprite_gui.png

    http://static3.kontain.com/1_0_3_0/css/assets/sprite_widgets.png

    And of course YouTube:
    http://s.ytimg.com/yt/img/master-vfl119884.png

  90. Denis

    I use a pretty simple sprite of all icons over my site:
    http://sokolov.cc/img/iconsWithLightWorld.png

  91. Mountain Pixel

    Here is the sprite from the new CNN.com design:

    http://i.cdn.turner.com/cnn/.element/img/3.0/global/buttons/Sprite_BT_master.gif

  92. Steve

    I set up a site that uses 2 sprites for top and left column navigation. I’ll combine them after reading this article:
    http://totos.com/

    images:
    http://totos.com/images/navmenu.png
    http://totos.com/images/locations.png

  93. Matt

    Here’s one from [H]ard|OCP

    http://www.hardocp.com/images/sprite.png

  94. Sebastaan Stok

    Google: http://www.google.nl/images/nav_logo7.png

    And one I made for an client of mine:
    http://www.poker-trips.eu/imgs/layout/bgs.png
    http://www.poker-trips.eu/imgs/layout/evtr.png
    http://www.poker-trips.eu/imgs/layout/evtr-cats.jpg
    http://www.poker-trips.eu/imgs/layout/nl/menu2.png

    Site is in dutch by the way :)

    My own site does not use sprites at the moment, but i plan to use for the next version.

  95. Cameron Baney

    Sprite sheet from Made Me LOL:
    http://www.mademelol.net/images/sprites.png

    Sprite sheet from my portfolio:
    http://www.cameronbaney.com/wp-content/themes/cameronbaney/images/sprite.png

  96. Will

    That’s awesome, I had never thought to look.

  97. Gabriel Tadeu

    In my last job (http://www.elmachips.com.br) i used many sprites like:

    http://www.elmachips.com.br/images/sprites_buttons.png
    http://www.elmachips.com.br/images/sprites_logos_yb.png
    http://www.elmachips.com.br/images/sprites_logos_bg.png

  98. Montana Flynn

    I made this for a client:

    http://www.discountcapital.com/css/img/SoCAL.jpg

  99. Tommy

    I just updated the css of my 80s/90s blog Saturday Morning Central, so it might be one of the more colorful/obnoxious sprites in the contest. :)

    http://saturdaymorningcentral.com/wp-content/themes/smc3/images/smc.png

  100. Dylan

    Love this one from Tim Van Damme’s website: http://maxvoltar.com/img/footer.png.

  101. Manu

    Both from a demo i made few months ago :

    http://demos.ailurus.fr/ailurus-v0/img/HEADLINKS/DARK/headlinks.jpg
    http://demos.ailurus.fr/ailurus-v0/img/BLOCS/580/top.jpg

  102. John Campbell

    Dang, I feel like I am way behind in commenting on this one!

    Here is the sprite I use for DesignBump:
    http://designbump.com/sites/all/themes/designbumpv3/img/imagebase.png

    I am trying to continually add images to it to improve the sites performance.

    I also really like the one that Sharenator.com uses:
    http://www.sharenator.com/images/s.gif

  103. Colin

    Nice sprite from Invoice Machine:

    http://assets.invoicemachine.com/images/application.png

  104. Andrea

    Hey Chris,

    keep up with your good work…

    http://www.myvouchercodes.co.uk/public/images/tab-sprites.jpg

  105. John Faulds

    A couple I’ve done recently:

    http://www.sechiropractic.com.au/images/sprites.png
    http://www.publishfirst.org/lyc/images/nav.png

    If I ever use image replacement for a nav bar, I always use a single image, but ‘ve only taken that a step further to include more site images a couple of times but will be making use of http://spriteme.org/ to do so more in the future.

  106. Seth

    I used sprites in the menu of a site I’m working on for a college jiu jitsu club. Thanks for the great podcast…that where I learned it.

    http://www.adaltadesigns.com/testvideo/index.html

  107. Scott block

    Definitively not the best, but here’s mine. From my portfolio, http://www.scottblock.com, used for the icons.

    http://scottblock.com/icons.gif

  108. Chris Muench

    this is one i used on a site i did for LogicBUY.
    http://www.logicbuy.com/images/nav.jpg

    i used more on the site, but that is the main one.

  109. Pedro

    http://200.192.177.238/novoletras/sprite_barras.png
    http://200.192.177.238/novoletras/sprite_plugins_interna.png
    http://200.192.177.238/novoletras/rdp.gif
    http://200.192.177.238/novoletras/sprite_botoes_lista.png
    http://200.192.177.238/novoletras/sprite_acc.gif
    http://200.192.177.238/novoletras/sprite_suggest.png
    http://200.192.177.238/novoletras/sprite_bss.gif

    These change every day:

    http://letras.terra.com.br/sprites/diario/top1_1256550728.jpg
    http://letras.terra.com.br/sprites/diario/top2_1256550728.jpg
    http://letras.terra.com.br/sprites/diario/usuarios_1256590871.jpg
    http://letras.terra.com.br/sprites/diario/cifra_1256590896.jpg

  110. David K.

    I got quite large one, for a site with furniture eshop

    http://www.asko-nabytek.cz/

    And main sprite is here, there are 2 more but small ones

    http://www.asko-nabytek.cz/skin/frontend/default/asko/design.png

    All handcrafted, no generator used.

  111. Dusan

    Uhm… can I post this one?
    http://cdn-www.pornhub.com/images/mega-bgv26.png
    :)

  112. webbografico

    this is one from the main nav of whitehouse.org:

    http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif

  113. Steve

    Sadly I haven’t made my own yet, only read your article yesterday with tutorial so still working on it.

    However, I admired this one about a year or so ago and thought it was a great idea, so I’ll share this instead:

    http://images.play.com/SiteCSS/Play/Live1/2009102202/css/sprites/core-site.gif

  114. Carlos

    Ooo yea Sprite it up YO!

    This is from my photography agency me and my buddies did, but I did the website and they took pictures

    Sprite: http://acaimages.com/gfx/navBar.jpg

  115. George

    The best site that you can see sprites on is http://www.godaddy.com which makes it very fast although it has a lot of contents.

  116. Peter Wilson

    Here’s one I did for the nav on a client site. The text on the left is white, so it looks odd on a white background:

    http://www.juliamorris.com/09site/wp-content/themes/juliamorris/assets/child/i/ir/nav-sprites-24-fs8.png

  117. stygyan

    I did one for a Splash Page. Oh yes, a Splash Page. The boss insisted on it, and well, he was the one to pay.

    There you are:

    http://www.systemsevillaeste.com/_img/splash.png

  118. Odin Dutton

    Wow, awesome prize! Great idea.

    The most impressive sprite I’ve seen is the one in use on Florida Flourish.

    It can be seen here and is a whopping 1043x697px

  119. Mark Sinkinson

    Here is mine http://www.msinkinson.co.uk/images/dates.png

  120. leo rapirap

    never tried CSS sprites before BUT will definitely study, learn and use it sometime in my future projects.

  121. David Powell

    I use two for the artist site I made one for his top menu and one for his main menu:

    the top menu is non-active and hover state only:
    http://matthughesart.com/indeximg/top_nav.png

    the side menu has non-active, hover, and active (active is white)
    http://matthughesart.com/indeximg/main_menu.png

  122. Darren

    Great tip, Definately like this method.

    Found these from TV1.rtp.pt

  123. kyle steed

    http://kylesteed.com/wp-content/themes/steed/styles/images/social_sprite16.png

  124. Jonny

    http://www.pointconceptsurf.com/gallery.html

    Sprite menu bar!

  125. Graystatic

    Sprites were used for the nav of this portfolio site I did recently:
    creativeinabox.com
    http://creativeinabox.com/images/menu-imgs-hover.png

  126. Nithin Bekal

    Sprites were used for the twitter and RSS links in the footer.

    http://www.fedena.com/images/follow.png

  127. Eric

    Here is my very first one, created following your guide Chris!

    http://spectrum-massage.com/newsite/wp-content/themes/spectrum/images/menubar.png

    Eric

  128. Pawan

    Here’s mine…
    http://www.pawanpillai.com/images/nav/nav-sprite.png

  129. Sune

    Sprites used on the Power Miners site at LEGO.com:
    http://cache.lego.com/upload/contentTemplating/PowerminersMenu/images/pic33360EF749458B11AF6B5AD4A3EE08BE.gif

    (http://powerminers.lego.com/en-US/default.aspx)

    /Sune

  130. dp

    sigh, i’ve no personal chops to showcase, but i did realize they are put to handy use in a site that i stare at day in and day out. any /. fans recognize this? those of course would be the category icons for individual posts.

  131. Marc

    Useful link icons:

    http://www.uifreak.com/media/583/spritesmall.png

    CSS on site.

  132. Dawid

    Actually it’s only menu. But I used this 5 years ago. Long time before all this “sprite madness” :)

    http://modelarch.pl/img/menu.png

  133. Thad Bloom

    Hope nobody said this one yet, but I found this one on BlackMoon Designs website.

    http://blackmoondev.com/wp-content/themes/blackmoon/img/top-bg.jpg

  134. Matthew Webb

    Quite a cool sprite, even if I do say so myself. Although the accompanying website is not my finest hour.
    http://connectionselectrical.co.uk/style/light-trans.png

  135. Sumeet Chawla

    This sprite I found at AOL.com.. Its a very long vertical sprite http://portal.aolcdn.com/p/_v11/css/blue/blue_skin.png

    Other than that I found this CSS sprite used to create an awesome hover effect on the menu. I found about this sprite long back on CSS-Tricks forums only. This one belongs to http://www.gilleardmarketing.com and the sprite is http://www.gilleardmarketing.com/images/topnavbg.png

    And in the end my very first CSS sprite :) http://www.code-pal.com/wp-content/themes/codepal/images/twitter.jpg

  136. Sean Hood

    http://mooshell.net/mooshellmedia/img/sprites.png

    For http://mooshell.net/

  137. Jay Welsh

    Hi Chris,
    I thought the sprites Apple uses for iWork.com and Me.com are really detailed and interesting, it just shows how much Apple really care about usability and design.

    Here they are:
    iWork.com Sprite
    Me.com Sprite

  138. Colo

    This is also a little sprite, but famous?

  139. Ben

    I didn’t relise people used sprites like this, I’ve only used them for buttons for hover and active states. It make sence though because there’s fewer requests from te server so I guess the pages would load quicker.

  140. Sunny Singh

    I got two really nice ones that I use for my main site layout. I take big pride in my sprites, lol.

    http://cdn.myunv.com/img/resource/sitewide/b6/assets.sprite.png

    http://cdn.myunv.com/img/resource/homepage/sidebar-tabbed-sprite.png

  141. redwall_hp

    YouTube’s sprite: http://s.ytimg.com/yt/img/master-vfl125983.png

    Yahoo’s new one, for repeating backgrounds: http://d.yimg.com/a/i/ww/met/gsprite_071309.gif

    Last.fm: http://cdn.last.fm/flatness/header/headersprite.1.png

    Mashable: http://ec.mashable.com/wp-content/themes/v5/img/bg.png

  142. Alistair

    http://pixelcoder.co.uk/clients/tragic-town/images/ttSprite.png

    Site a bit broken in non standards browsers right now :(

  143. Dani

    mine is simple, but it is my fav I’ve ever used. gives my links a real water effect:

    http://euphoriastudio.freehostia.com/images/link.png

    in action: http://www.euphoria-studio.com

  144. Taeo

    Nothing special about the simplicity of the sprite itself, but the implementation and browser compatibility of this made me proud.

    http://publishthequest.com/sites/publishthequest/images/mainnav_sprite.png

    The implementation which took some tinkering for IE6 issues with z-indexing & trns png issues
    http://publishthequest.com/

    Side note about sprites from my perspective…

    They can be great when used properly. They limit connections / downloads and can reduce page load time and need for pre-loading (and we’re all proud of these pixel-perfect creations).

    The hype about using them can be greatly misunderstood and implemented poorly for the sake of using “sprites”

    Consider the implementation, usage and cost benefit of your solution before implementing in production. But have a great time exploring the possibilities.

    Apologies for the best-practices speech. I feel it’s critical to think about why you’re doing something when learning to do it.

  145. Michiel

    I use sprites for navigation as well, on this site I created for a myth rock band;

    http://www.kingfishersky.com/

  146. Vladimir Sobolev

    http://gidic.ee/i/sprite.png
    http://viis.ee/images/icons.png
    http://viis.ee/images/gradients.png
    http://www.nordsafe-engineering.com/i/gfx.png

  147. Peter

    Latest one:

    http://www.back2.co.uk/images/bg_sprites.jpg

  148. hugo

    I made this one (with white background) http://www.pilottti.fr/squelettes/img/sprites.png

  149. Mathieu

    Twenga css sprite

    :)

  150. Chad Smith

    Mine is pretty simple:
    http://www.30threedesign.com/img/navSprite.png

    i also have a parallax, if you grab the lower right hand corner and re-size back and forth the page tears in the header move.

  151. Think Bohemian

    http://whyspam.me/images/WhyLogo.png

    Effect looks awesome when the image is slowly faded in instead of immediately replacing the first image.

  152. elmalak

    Hi,
    I just made one for a WordPress site here.

    http://themustardplug.com/child/wp-content/themes/childaid/images/logos-sprite.png

    Thanks Chris.

    elmalak

  153. Marta

    I have made a few, but they’re all very basic, not really interesting (most of them follow the classic scheme – all elements of the menu in three different states, as simple as that). However, I found this the other day, I’d call it “Sprite Madness” or something like that…:

    http://www.ulmanen.fi/fugue/all_shadowless_compact.png

    Found here, this image is part of a tool that allows you to create css sprites based on the Fugue icon set. This is icon overdose at first sight – but kinda useful anyway :)

  154. Jason

    Seems I’m late to the party. But I made one for my friend’s domino site. He coded it all in javascript.

    Sprite:
    http://www.arisbartee.com/bigsix/images/bone-sprites.png

    Domino game:
    http://bigsixtotheboard.com/

  155. Frank

    http://www.pitgroup.nl/assets/img/sprite.png

  156. António Manuel Cardoso

    noticias.rtp.pt and desporto.rtp.pt use this http://img.rtp.pt/noticias/images/ImgNoticias_n_repeat.jpg . It’s BIG :)

  157. Richard

    I’m in google Reader all day, so this was an obvious one for me: http://www.google.com/reader/ui/1454282699-lhn-sprite.png

    I’ve thought about it for my own site (mexicometro.org; yes, ugly as hell; I’m not a designer, but I’m self-teaching myself about css, php, etc), but I don’t have that many background images, so it didn’t make sense to do so.

  158. Anthony

    Here is a link to my css-sprite

    http://www.trewknowledge.com/images/global.png

    Pretty simple, but so is the site :)

  159. mansur

    Simple sprite i try for my blog… next – prev navigation…

    http://4.bp.blogspot.com/_cJm1dkHdSEo/SunTQL_om2I/AAAAAAAAA3Q/LZ_KIWhZjYQ/s1600/randomize.gif

    :)

  160. paul

    Hi,

    I used a simple sprite for my main navigation on my portfolio:
    http://sideradesign.com

  161. paul

    http://sideradesign.com/images/menusprite.png

  162. Jorge

    The Yahoo Search Box is pretty neat. http://m.www.yahoo.com/. The Sprite is here http://d.yimg.com/a/i/ww/met/th/slate/sprite_masthead_slate_062609.png

  163. Bryce

    I was doing an urban art project and needed a graffiti style font for the main navigation;

    Urban Art Sprite

  164. Farid Hadi

    Haha :) This seems fun :)

    Here is a sprite that I created for a tutorial I wrote a while back.

    http://www.faridhadi.com/demo/slide-your-contact-form-in-with-style/images/contact-sprite.gif

  165. Cristian

    Here is a good example from http://www.getdropbox.com:

    https://www.getdropbox.com/static/34502/images/sprites/sprites.png

  166. zulsdesign

    here is sprite http://cahayaislam.com/wp-content/themes/CahayaIslam.com/images/sprite.png

  167. Matteo

    At Publico.es we have a big one, but it’s still very light compared to all the images separated…

    http://www.publico.es/v2/css/img/sprite.png

  168. Skilldrick

    I’m making a JavaScript Minesweeper at the moment – here’s my sprite: http://www.skilldrick.co.uk/minesweeper/images/mine-sprite.png

  169. Brad

    Our tiltes sprite :

    http://www.primestudiosllc.com/images/titles.png

  170. Chad Ritchie

    My site navigation uses sprites.
    http://www.chadritchie.net/

  171. Ankur Gupta

    Yahoo Sprites:
    http://d.yimg.com/a/i/ww/met/pa_icons/in_pa_sprite_072409.png
    http://d.yimg.com/a/i/ww/met/sprite_pg_nontheme_081709.gif
    http://d.yimg.com/a/i/ww/met/th/slate/sprite_masthead_slate_062609.png

  172. Heme

    Picasa has a pretty crazy sprite:
    h
    http://lh4.ggpht.com/s/v/56.42/img/lh_sprite.gif

  173. Davis

    Since I have never created a sprite myself, I would borrow one from the search giant :)

    http://www.google.com/images/nav_logo7.png

    Btw, would you be able to ship the book to India?

  174. visaap

    Since a month or so I’ve been working on sprites for the company I work for. It gives a fantastic feeling when a site launches and allmost every image used on the site is in a sprite :)
    Here is one of them used for peterrdevries.nl:
    http://www.peterrdevries.nl/wp-content/themes/peterrdevries.nl/pix/global/sprite-peter.png

  175. John

    Here’s one for the contest.
    http://www.greenbayaja.org//images/navbarsprite1.gif

  176. Jesper

    I did this sprite about a year ago. Approx. 50 HTTP requests reduced to 1 (~80 KB)

    http://admanager.dba.dk/css/images/masterImage.png

  177. Eliazer

    Was really fun to position them!

    http://ebraun.adorama.com/pix/images/adoramaPixOrderingBG.png

  178. Ruana V

    I’m an aspiring (an not yet earning) female webdesigner from Austria, Europe. I regulary read your Blog, Chris, and also articles written by Dan (love Simple Bits).

    Therefore I’m certain that this book would be of great use to me! There are not enough women out there doing this job – not by far – and even less who are located in Austria (and if so many would have a hard time reading a book written in English). I hope u choose to support “us” (me that is ;-)).

    Love, Ruana

This comment thread is closed. If you have important information to share, you can always contact me.