Quick Tutorial: CSS Sprites - GoFuckYourself.com

Voodoo · 04-15-2009, 04:10 PM

Quick Tutorial: CSS Sprites

http://www.g33ky.com/sprite/

Hello All,

I just threw this page together to test out a method for displaying CSS Sprites. Feel free to check it out. I didn't spend much time doing super-cool icons or code formatting or anything... deal with it (

), but for those of you who haven't been exposed to sprites before, it may give you some good ideas for your projects.

The concept is, use 1 image for all of your buttons or icons etc... and use CSS positioning to display the various parts of the image. This causes fewer server requests, faster page loading and less code in general. It's easiest if you set these up on a grid in your Photoshop file.

Hope it gives you some ideas.

-V

munki · 04-15-2009, 04:14 PM

Nice tut dawg...

When can i expect the css fairies run through?

Voodoo · 04-15-2009, 04:15 PM

Quote:

Originally Posted by munki

Nice tut dawg...

When can i expect the css fairies run through?

I only have CSS Rootbeers.

Ozarkz · 04-15-2009, 04:15 PM

Interesting thanks for posting.

PSD CSS XHTML · 04-15-2009, 04:17 PM

Mehhh. I hate fucking with sprites. Nice little sample though.

RyuLion · 04-15-2009, 04:18 PM

Official lame thread of the day..

Voodoo · 04-15-2009, 04:26 PM

Quote:

Originally Posted by RyuLion

Official lame thread of the day..

It's called a "contribution":
http://dictionary.reference.com/browse/contribution

con⋅tri⋅bu⋅tion /ˌkɒntrəˈbyuʃən/ Show Spelled Pronunciation [kon-truh-byoo-shuhn] Show IPA
–noun 1. the act of contributing.
2. something contributed.
3. an article, story, drawing, etc., furnished to a magazine or other publication.

You should try it sometime.

Mr Pheer · 04-15-2009, 04:29 PM

very cool idea

Voodoo · 04-15-2009, 04:34 PM

Here's some more info about them and how Yahoo & AOL use them:
http://www.websiteoptimization.com/s...k/css-sprites/

StuartD · 04-15-2009, 04:42 PM

Yup, it's a powerful thing... most "5 star ratings" scripts are done this way, as well as many other scripts involving icons of some sort.

Good thread

Why · 04-15-2009, 05:10 PM

damn voodoo, never used sprites before, thanks for the infos! interesting idea.

mikeyddddd · 04-15-2009, 05:28 PM

Thanks!

sortie · 04-15-2009, 05:44 PM

Quote:

Originally Posted by Voodoo

Quick Tutorial: CSS Sprites

http://www.g33ky.com/sprite/

Hello All,

I just threw this page together to test out a method for displaying CSS Sprites. Feel free to check it out. I didn't spend much time doing super-cool icons or code formatting or anything... deal with it (

), but for those of you who haven't been exposed to sprites before, it may give you some good ideas for your projects.

The concept is, use 1 image for all of your buttons or icons etc... and use CSS positioning to display the various parts of the image. This causes fewer server requests, faster page loading and less code in general. It's easiest if you set these up on a grid in your Photoshop file.

Hope it gives you some ideas.

-V

Good idea.

I code in flash so I would do that in flash.

Elli · 04-15-2009, 05:56 PM

Hot damn, that's the best explanation I've seen for sprites yet! Thanks for the quick demo!

woj · 04-15-2009, 05:59 PM

nicely done

Sands · 04-15-2009, 06:00 PM

I lurve sprites <3

st0ned · 04-15-2009, 06:01 PM

Very cool, this is new to me. Thanks for sharing.

04-15-2009, 04:10 PM	#1
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Location: Porn Valley, CA Posts: 10,590	Quick Tutorial: CSS Sprites Quick Tutorial: CSS Sprites http://www.g33ky.com/sprite/ Hello All, I just threw this page together to test out a method for displaying CSS Sprites. Feel free to check it out. I didn't spend much time doing super-cool icons or code formatting or anything... deal with it (), but for those of you who haven't been exposed to sprites before, it may give you some good ideas for your projects. The concept is, use 1 image for all of your buttons or icons etc... and use CSS positioning to display the various parts of the image. This causes fewer server requests, faster page loading and less code in general. It's easiest if you set these up on a grid in your Photoshop file. Hope it gives you some ideas. -V __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

04-15-2009, 04:14 PM	#2
munki Do Fun Shit. Industry Role: Join Date: Dec 2004 Location: OC Posts: 13,393	Nice tut dawg... When can i expect the css fairies run through? __________________ “I have the simplest tastes. I am always satisfied with the best.” -Oscar Wilde

04-15-2009, 04:17 PM	#5
PSD CSS XHTML Confirmed User Join Date: Mar 2009 Location: I was right here a minute ago Posts: 546	Mehhh. I hate fucking with sprites. Nice little sample though. __________________ . . psd to xhtml/css conversions . . cost effective css template solutions . . and now offering css lessons . . My XBIZ profile

04-15-2009, 04:18 PM	#6
RyuLion ClubDomCash.com Industry Role: Join Date: Mar 2003 Location: San Diego Posts: 32,222	Official lame thread of the day.. __________________ Adult Biz Consultant A tech head since 1995

04-15-2009, 04:34 PM	#9
Voodoo ♥ ♦ ♣ ♠ Industry Role: Join Date: Sep 2002 Location: Porn Valley, CA Posts: 10,590	Here's some more info about them and how Yahoo & AOL use them: http://www.websiteoptimization.com/s...k/css-sprites/ __________________ "I'm selflessly supporting the common good, but only coincidentally looking out for No.1."

04-15-2009, 04:15 PM	#4
Ozarkz So Fucking Banned Join Date: Jan 2009 Posts: 2,377	Interesting thanks for posting.

04-15-2009, 04:29 PM	#8
Mr Pheer Confirmed User Industry Role: Join Date: Dec 2002 Posts: 20,887	very cool idea

04-15-2009, 04:42 PM	#10
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	Yup, it's a powerful thing... most "5 star ratings" scripts are done this way, as well as many other scripts involving icons of some sort. Good thread __________________ This is me on facebook This is me on twitter

04-15-2009, 05:10 PM	#11
Why MFBA Industry Role: Join Date: Mar 2003 Location: PNW Posts: 7,230	damn voodoo, never used sprites before, thanks for the infos! interesting idea.

04-15-2009, 05:28 PM	#12
mikeyddddd Viva la vulva! Join Date: Mar 2003 Location: you can't please everyone, so you got to please yourself Posts: 16,557	Thanks! __________________ AdultStarProfits AmbyaCash AnilosCash AzianiGold ColdHardCash FlashTheMoney IdolBucks MediumPimpin NSCash Nubiles PussyCash ScoreCash Sextronix SpunkyCash TubeTitans Twistys

04-15-2009, 05:56 PM	#14
Elli Reach for those stars! Industry Role: Join Date: Apr 2003 Location: Vancouver, BC Posts: 17,991	Hot damn, that's the best explanation I've seen for sprites yet! Thanks for the quick demo! __________________ Make More Money with Cams and Dating at FFN.com! email: [email protected]

04-15-2009, 05:59 PM	#15
woj <&(©¿©)&> Industry Role: Join Date: Jul 2002 Location: Chicago Posts: 47,882	nicely done __________________ Custom Software Development, email: woj#at#wojfun#.#com to discuss details or skype: wojl2000 or gchat: wojfun or telegram: wojl2000 Affiliate program tools: Hosted Galleries Manager Banner Manager Video Manager Wordpress Affiliate Plugin Pic/Movie of the Day Fansign Generator Zip Manager

04-15-2009, 06:00 PM	#16
Sands Confirmed User Join Date: Feb 2007 Location: 418194907 Posts: 3,134	I lurve sprites <3

04-15-2009, 06:01 PM	#17
st0ned Confirmed User Industry Role: Join Date: Mar 2007 Location: Arizona Posts: 8,437	Very cool, this is new to me. Thanks for sharing. __________________ Conversion Sharks - 1,000+ adult dating offers, traffic management, and consistently high payouts. We will guarantee and beat your current EPC to win your dating traffic! Skype: ConversionSharks \|\| Email: info /@/ conversionsharks.com