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:
The Facebook Sprite. Everything in one place ;)
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.
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)
I had never done sprite images either, so this was also a first.
(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.
PS I hope you are very happy today after Favre/Vikes did not win but your beloved Pack did.
Dragon interactive navigation sprite:
Not an image but a pretty good on-line tool for creating them.
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:
Here is one of my own for an old design I had:
Apple menu sprite
From the Yahoo! Sports site:
INSight Design Conference Nav Sprite:
Here’s two from the navigation on two of my sites:
And here’s one I like that Digg uses:
This is a small sprite for my social media links on my portfolio website.
Simple social networking sprite I made for a client using WP:
I’m not entering the contest with this, but
jQuery UI ThemeRoller sprite is really nice.
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!
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. :)
Hey man, that image actually isn’t a sprite. =/
This is what Amazon’s used to look like:
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.
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
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:
Nice going Chris!
Blog by Thomas Olausson
Here’s one of mine for all of the misc icons on my site:
I should have also linked to some beer sprites!
May I interest you in some silhouettes?
Blog by Thomas Olausson
My sprite from http://turgrad.by (header navigation).
Alice Cooper’s Navigation:
YouTube’s massive sprite:
A good sprite from Warhammer Online website:
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
From a site I manage.
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 ^^ )
This one is from SAPO Homepage used in backgrounds.
This site I Des/Dev’d that uses sprites on the nav:
This is from Rachael Taylor Designs
Whoops that was the wrong image [above].
Here it is:
Tutorial9 Has a neat sprite for their navigation
CSS-Tricks has an awesome sprite
Chris Spooner’s sprite covers a few subscribing methods and miscellaneous items.
And last, Apple’s navigation sprite
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:
Used on http://www.isberget.no/tromso-il/alfheim
not mine but this megaman sprite has to be one of the best ever. you can see it in play here.
Here are three image sprites of two websites I’m working on right now, the sites are not live yet though:
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)
sprite used in my site (http://www.imagomedia.be):
Sprite from my site header navigation: http://www.davidrojas.net/wp-content/themes/davidrojasv2/images/menu.png
I have a few sprites on my site, but here are the three main ones:
Small Social Icons:
And the main navigation:
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!
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.
Google.cn has a nice little animation at the frontpage.
I’m looking forward to seeing a good list here.
First (and only so far) attempt at sprites for a new blog design I’m working on:
Haven’t tried anything as complex as the Facebook sprite, but it would be interesting to try on an upcoming project
That is awesome, how did you do that?
I’ve got two:
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
From my (outdated) blog-design:
Notice the easter egg I made just for curious users! ;)
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.
From Jquery Theme Roller:
One small one I did for a website:
Small navigation sprite
Here’s a download one I made, it’s pretty innocent but gets the job done.
I picked up on sprites by reading this blog. Here’s a simple sprite image to create a neat button effect:
I created several of them for this client:
My first CSS sprite:
here it is:
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.
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:
Here is a sprite I set up for a navigation design:
You can try it out here, on the right:
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. :)
1 more again xD http://img108.imageshack.us/img108/7093/powmettaurzxhu8.gif
Kontain.com uses a lot of very good sprites:
And of course YouTube:
I use a pretty simple sprite of all icons over my site:
Here is the sprite from the new CNN.com design:
I set up a site that uses 2 sprites for top and left column navigation. I’ll combine them after reading this article:
Here’s one from [H]ard|OCP
And one I made for an client of mine:
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:
Sprite sheet from my portfolio:
That’s awesome, I had never thought to look.
In my last job (http://www.elmachips.com.br) i used many sprites like:
I made this for a client:
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. :)
Sorry to enter twice, but I just updated my personal music website too.
Love this one from Tim Van Damme’s website: http://maxvoltar.com/img/footer.png.
Both from a demo i made few months ago :
Dang, I feel like I am way behind in commenting on this one!
Here is the sprite I use for DesignBump:
I am trying to continually add images to it to improve the sites performance.
I also really like the one that Sharenator.com uses:
Nice sprite from Invoice Machine:
keep up with your good work…
A couple I’ve done recently:
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.
Definitively not the best, but here’s mine. From my portfolio, http://www.scottblock.com, used for the icons.
this is one i used on a site i did for LogicBUY.
i used more on the site, but that is the main one.
These change every day:
I got quite large one, for a site with furniture eshop
And main sprite is here, there are 2 more but small ones
All handcrafted, no generator used.
Uhm… can I post this one?
this is one from the main nav of whitehouse.org:
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:
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
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:
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:
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
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:
the side menu has non-active, hover, and active (active is white)
Great tip, Definately like this method.
Found these from TV1.rtp.pt
Sprite menu bar!
Sprites were used for the nav of this portfolio site I did recently:
Sprites were used for the twitter and RSS links in the footer.
Here is my very first one, created following your guide Chris!
Sprites used on the Power Miners site at LEGO.com:
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:
CSS on site.
Actually it’s only menu. But I used this 5 years ago. Long time before all this “sprite madness” :)
Hope nobody said this one yet, but I found this one on BlackMoon Designs website.
Quite a cool sprite, even if I do say so myself. Although the accompanying website is not my finest hour.
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
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:
This is also a little sprite, but famous?
Ooops, my image will not be shown, once again with a-Tag:
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.
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
Site a bit broken in non standards browsers right now :(
mine is simple, but it is my fav I’ve ever used. gives my links a real water effect:
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.
The implementation which took some tinkering for IE6 issues with z-indexing & trns png issues
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;
I made this one (with white background) http://www.pilottti.fr/squelettes/img/sprites.png
Twenga css sprite
Mine is pretty simple:
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!
Effect looks awesome when the image is slowly faded in instead of immediately replacing the first image.
I just made one for a WordPress site here.
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…:
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 :)
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
Pretty simple, but so is the site :)
Simple sprite i try for my blog… next – prev navigation…
I used a simple sprite for my main navigation on my portfolio:
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.
Here is a good example from http://www.getdropbox.com:
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…
Our tiltes sprite :
My site navigation uses sprites.
Picasa has a pretty crazy sprite:
Since I have never created a sprite myself, I would borrow one from the search giant :)
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:
Here’s one for the contest.
I did this sprite about a year ago. Approx. 50 HTTP requests reduced to 1 (~80 KB)
Was really fun to position them!
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 ;-)).