Show Off Your Sprites!
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:
Loading ...
The Facebook Sprite. Everything in one place ;)
http://www.facebook.com/rsrc.php/z136G/hash/3ay18ob4.png
LOL Thats funny
this once has to win
This is like the one I posted further down. I was thinking about making some kind of crazy template utilizing sprites like this.
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.
I have one right here.
http://debasish.org/demo/traffikwise/assets/sprite-main.png
Still not finished, working on it :)
Google has a good sprite – http://www.google.com/images/nav_logo7.png
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.
Dragon interactive navigation sprite:
http://dragoninteractive.com/lib/i/navigation/sprite.jpg
Not an image but a pretty good on-line tool for creating them.
http://spriteme.org/
Andi,
That is pretty cool. I have always just hand built them and then did a little trial and error.
Try using that on Digg.com… 6 requests and 77k saved, and the resulting sprite is very impressive…
From dragon interactive site:
http://dragoninteractive.com/lib/i/navigation/sprite.jpg
http://dragoninteractive.com/lib/i/subnavigation/sprite.jpg
Here is one of my own for an old design I had:
http://stormink.net/images/STORMINKspriteOLD.png
Apple menu sprite
http://images.apple.com/global/nav/images/globalnavbg.png
From the Yahoo! Sports site:
http://l.yimg.com/a/lib/uh/15/sprites/sports_gray-1.0.0.png
INSight Design Conference Nav Sprite:
http://www.insightdesignconference.com/img/bg_navigation.png
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
This is a small sprite for my social media links on my portfolio website.
http://www.renepolitiek.nl/img/social-media-logos.png
Simple social networking sprite I made for a client using WP:
http://www.studio8.net/wp-content/themes/studio8dotnet/images/socialbuttons.png
I’m not entering the contest with this, but
jQuery UI ThemeRoller sprite is really nice.
http://www.henryfroes.com/jonatan/goiano/images/all_tops.jpg
slider of this theme : http://migre.me/9Wqa
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
This sprite from Yahoo is pretty impressive: http://farm4.static.flickr.com/3548/3366898583_e6a4c551ec_o.png
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
Hey man, that image actually isn’t a sprite. =/
This is what Amazon’s used to look like:
http://www.jonnyhaynes.com/wp-content/uploads/2009/02/amazon.png
I visited his websie and firebugged it. It is indeed a sprite in it’s usage.
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.
my navbar uses sprites.
http://curtisblackwell.com/
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.
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…
Here’s the sprite for http://www.peerpressurecreative.com
http://www.peerpressurecreative.com/images/sprite.png
http://images.apple.com/global/nav/images/globalnavbg.png
It belongs to apple but thats where I first learnt about the concept.
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!
Blog by Thomas Olausson
http://www.ultravoid.com/wordpress/?p=101
Here’s one of mine for all of the misc icons on my site:
icons.png
I should have also linked to some beer sprites!
http://paulasaur.us/css/images/beers.png
May I interest you in some silhouettes?
http://areyoudesign.com/blog/wp-content/themes/Invitation%20to%20the%20Crazytrain/images/date.png
Blog by Thomas Olausson
http://ultravoid.com/test-nav/#grapefruit
http://ultravoid.com/test-nav/menu-nav.png
My sprite from http://turgrad.by (header navigation).
http://turgrad.by/sites/all/themes/turgrad/img/hdr-bgs.png
Alice Cooper’s Navigation:
http://www.alicecooper.com/images/template/ALI_nav.png
YouTube’s massive sprite:
http://s.ytimg.com/yt/img/master-vfl125983.png
A good sprite from Warhammer Online website:
- http://mythicmktg.fileburst.com/war/us/en/global/images/new-nav_matrix.gif
That’s a bit much isn’t it, it could be 2/5’s of the size.
Here is the sprite I made for makesometime.com
http://makesometime.com/system/application/views/images/Sprite.png
From a site I manage.
http://www.dublin.oh.us/recreation/images/all-icons.png
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
This one is from SAPO Homepage used in backgrounds.
http://h.s.sl.pt/imgs/imgs.gif
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
This is from Rachael Taylor Designs
http://www.rachaeltaylordesigns.co.uk/assets/css/images/rachaeltaylordesigns_menu.png
Whoops that was the wrong image [above].
Here it is:
http://www.thelyndale.com/wp-content/themes/the-lyndale/images/btns-nav.jpg
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
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.
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
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
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
A realtor client’s site: http://www.soprisrealty.com/images/button-sprite.png
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
Here is mine from RIPT Apaprel (http://riptapparel.com)
http://riptapparel.com/ript/wp-content/themes/riptTheme/images/navBG.jpg
sprite used in my site (http://www.imagomedia.be):
http://www.imagomedia.be/wp-content/themes/imagomedia_juli09/img/buttons_sprite.gif
Sprite from my site header navigation: http://www.davidrojas.net/wp-content/themes/davidrojasv2/images/menu.png
http://cymweb.com.ar/images/menu.jpg
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
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.
OBEY YOUR THIRST! – Sprite
Here is the link to a fabulous Prince of Persia Sprite!
http://img178.imageshack.us/img178/9213/princespriteswb3.gif
Here’s one of my little ones off of my portfolio website: http://www.racinewebworks.com/img/icons/sprite.png
New sprite: http://www.csskarma.com/img/sprite.jpg
Myspace Search Sprite
A lot there.
Here’s a simple one I’m using on a site (still in development): http://advantage-media.com/newsite/images/nav.gif.
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
Google.cn has a nice little animation at the frontpage.
http://www.google.cn/intl/zh-CN/images/toolbar_animation_20090618.png
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.
Deviant art
http://st.deviantart.net/minish/gruzecontrol/icons-small-modules.gif?6
http://pepelsbey.net/wp-content/themes/pepelsbey/i/graphics.png
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
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
That is awesome, how did you do that?
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.
here is a small one from my site
http://wsdesign.bestnoise.com/wp-content/themes/wsdesign2/style/images/rss-image-sprites.jpg
from china
https://img.alipay.com/pa/page/index/bg.png
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! ;)
From TheCampusList
http://www.thecampuslist.com/images/master-images.png
Here is one that I made for Svensk Handel http://www.svenskhandel.se/styles/images/spritesmap.png
I would love to get that book!
There is a nice one here. Not mine though. http://dragoninteractive.com/lib/i/navigation/sprite.jpg
Navigation for a spec site we are still working on.
http://www.kandsadv.com/stellar/IMAGES/navigationBar.jpg
From Jquery Theme Roller:
Themeroller Sprite
One small one I did for a website:
http://www.schweizer-illustrierte.ch/_img/media_buttons_all2.gif
Amazon’s sprite
Small navigation sprite
Here’s a download one I made, it’s pretty innocent but gets the job done.
http://cssaid.com/images/download.png
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
I created several of them for this client:
http://waterscapespro.com/
My first CSS sprite:
here it is:
http://www.figurinesthedetour.dk
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.
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
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
My favorite sprites:
Mobile Me, Electronic Arts, and Fantasy Interactive.
Here’s the one from the whitehouse.gov main navigation:
http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif
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/
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
The following image is not used for css sprite, but the following image can be used as an example of a very nice sprite for me. :)
http://www.sixtein.web.id/images/images.gif
1 more again xD http://img108.imageshack.us/img108/7093/powmettaurzxhu8.gif
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
I use a pretty simple sprite of all icons over my site:
http://sokolov.cc/img/iconsWithLightWorld.png
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
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
Here’s one from [H]ard|OCP
http://www.hardocp.com/images/sprite.png
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.
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
That’s awesome, I had never thought to look.
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
I made this for a client:
http://www.discountcapital.com/css/img/SoCAL.jpg
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
Sorry to enter twice, but I just updated my personal music website too.
http://tommyday.com/wp-content/themes/td/images/tommyday.png
Love this one from Tim Van Damme’s website: http://maxvoltar.com/img/footer.png.
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
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
Nice sprite from Invoice Machine:
http://assets.invoicemachine.com/images/application.png
Hey Chris,
keep up with your good work…
http://www.myvouchercodes.co.uk/public/images/tab-sprites.jpg
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.
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
Definitively not the best, but here’s mine. From my portfolio, http://www.scottblock.com, used for the icons.
http://scottblock.com/icons.gif
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.
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
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.
Uhm… can I post this one?
http://cdn-www.pornhub.com/images/mega-bgv26.png
:)
this is one from the main nav of whitehouse.org:
http://www.whitehouse.gov/sites/default/themes/whitehouse/img/nav-sprite.gif
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
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
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.
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
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
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 1043×697px
Here is mine http://www.msinkinson.co.uk/images/dates.png
never tried CSS sprites before BUT will definitely study, learn and use it sometime in my future projects.
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
Great tip, Definately like this method.
Found these from TV1.rtp.pt
http://kylesteed.com/wp-content/themes/steed/styles/images/social_sprite16.png
http://www.pointconceptsurf.com/gallery.html
Sprite menu bar!
Sprites were used for the nav of this portfolio site I did recently:
creativeinabox.com
http://creativeinabox.com/images/menu-imgs-hover.png
Sprites were used for the twitter and RSS links in the footer.
http://www.fedena.com/images/follow.png
Here is my very first one, created following your guide Chris!
http://spectrum-massage.com/newsite/wp-content/themes/spectrum/images/menubar.png
Eric
Here’s mine…
http://www.pawanpillai.com/images/nav/nav-sprite.png
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
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.
Useful link icons:
http://www.uifreak.com/media/583/spritesmall.png
CSS on site.
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
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
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
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
http://mooshell.net/mooshellmedia/img/sprites.png
For http://mooshell.net/
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
This is also a little sprite, but famous?
Ooops, my image will not be shown, once again with a-Tag:
Donating Obama
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.
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
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
http://pixelcoder.co.uk/clients/tragic-town/images/ttSprite.png
Site a bit broken in non standards browsers right now :(
http://pixelcoder.co.uk/clients/tragic-town/
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
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.
I use sprites for navigation as well, on this site I created for a myth rock band;
http://www.kingfishersky.com/
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
Latest one:
http://www.back2.co.uk/images/bg_sprites.jpg
I made this one (with white background) http://www.pilottti.fr/squelettes/img/sprites.png
Twenga css sprite
:)
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.
Really slick use of parallax there Chad!
http://whyspam.me/images/WhyLogo.png
Effect looks awesome when the image is slowly faded in instead of immediately replacing the first image.
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
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 :)
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/
http://www.pitgroup.nl/assets/img/sprite.png
and
http://www.pitgroup2.net/netsociety/assets/img/sprite.png
noticias.rtp.pt and desporto.rtp.pt use this http://img.rtp.pt/noticias/images/ImgNoticias_n_repeat.jpg . It’s BIG :)
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.
Here is a link to my css-sprite
http://www.trewknowledge.com/images/global.png
Pretty simple, but so is the site :)
Simple sprite i try for my blog… next – prev navigation…
http://4.bp.blogspot.com/_cJm1dkHdSEo/SunTQL_om2I/AAAAAAAAA3Q/LZ_KIWhZjYQ/s1600/randomize.gif
:)
Hi,
I used a simple sprite for my main navigation on my portfolio:
http://sideradesign.com
http://sideradesign.com/images/menusprite.png
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
I was doing an urban art project and needed a graffiti style font for the main navigation;
Urban Art Sprite
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
Here is a good example from http://www.getdropbox.com:
https://www.getdropbox.com/static/34502/images/sprites/sprites.png
here is sprite http://cahayaislam.com/wp-content/themes/CahayaIslam.com/images/sprite.png
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
I’m making a JavaScript Minesweeper at the moment – here’s my sprite: http://www.skilldrick.co.uk/minesweeper/images/mine-sprite.png
Our tiltes sprite :
http://www.primestudiosllc.com/images/titles.png
My site navigation uses sprites.
http://www.chadritchie.net/
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
Picasa has a pretty crazy sprite:
h
http://lh4.ggpht.com/s/v/56.42/img/lh_sprite.gif
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?
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
Here’s one for the contest.
http://www.greenbayaja.org//images/navbarsprite1.gif
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
Was really fun to position them!
http://ebraun.adorama.com/pix/images/adoramaPixOrderingBG.png
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