How to use CSS Sprites
Posted on 16 March, 2009 at 17:01 PM
There are already 23 Comments
About the Show
David shows you the basics of CSS Sprites how to use them your site design, they cut down load times and server requests. They are also easy to implement.
Links mentioned in this post:
Related Shows
- (1) Episode 189 - Using Inspiration Effectively
- (5) Episode 187 - Design with the Lights On
- (8) Episode 186 - Apples and Oranges
- (2) Episode 185 - Design like a Dictator
- (7) Episode 179 - It's All About Themes
User Comments
Mike 16 Mar, 2009 19:59:55 PM
Never worked with sprites, but now i will try it. Thx for the explanation. Simple and usefull
Sam 17 Mar, 2009 03:29:26 AM
I actually discovered this by accident when I used a similar technique (along with some JavaScript) to do an animated image (ie, something True Colour like a PNG or JPEG).
Arian Xhezairi 17 Mar, 2009 12:59:17 PM
Very fundamental explanation. Simple yet useful. Well done David.
Rafael Nascimento Sampaio 17 Mar, 2009 13:32:00 PM
I already see this before, but when you talk about obox use it I have to see, so I open the source code, and find the css path, soon i found the background, in png state, but I'm thinking that's dont need a transparent background or to be far one of other when they are squares, has your screencast, maybe if they don't be transparent and be more close one of other they weigth can be more light, but who knows, only testing to see, but now I have to work. See you guys soon.
Sprite of obox-design.com - www.obox-design.com/images/sprite.png, I hope you don't mind.
madmax2600 17 Mar, 2009 15:01:35 PM
Nice and easy workaround - really great tut. THX for sharing your stroke of genius. ;)
Analiza 17 Mar, 2009 15:55:09 PM
Again, one of the most simplest ways of explaining it I have seen by far :) Great job Dave :)
David Perel 18 Mar, 2009 10:32:54 AM
Thanks everyone for the compliments. I must be dead honest and say that I thought this would be my worst Tutorial. I forgot all the proper terms and stuttered the whole way through, so I am quite relieved that everyone found it useful :)
@Rafael - The reason I was using PNG's was because the dark blue background was meant to have more detail in it. That may still come at a later date but for now it would help if I made them GIF's. It is on my long list of "to-do's"
Rob MacKay 28 Mar, 2009 22:41:41 PM
@Bogdan - I bet there are many out there...
Its better to have more than one perspective, people learning will find it easier to grasp if they miss understood the first time.
Cristhian Bedon 06 Apr, 2009 22:40:27 PM
Wow, This is the first time I have heard of sprites combined with CSS, great tutorial - it was simple and sweet.
Frato 22 Apr, 2009 15:35:08 PM
Maybe you could try YASC, a tool I wrote to easily generate the css rules for your sprite images : www.lecentre.net/fratoblog/yasc/
Rich 20 May, 2009 18:24:47 PM
Couldnt really understand what you were saying clearly, but thankyou for taking the time to make this video
joe 17 Sep, 2009 15:55:25 PM
nice video, thanks for sharing, I didn't know it is possible to do it this way
sunnybear 11 Oct, 2009 16:46:15 PM
There is an automated tool to create CSS Sprites of almost every complexity. It's included into Web Optimizer - www.web-optimizer.us/ and is available as a free service -- sprites.in/ . It covers about 98-99,5% of all possible cases of Sprites usage.
waleed 17 Oct, 2009 03:14:14 AM
Css sprite Generator, The Top 4 CSS sprite generator:: ledomoon.blogspot.com/2009/10/css-sprite-generator-top-4-css-sprite.html
Drop a Comment
2010 © Obox Design
From the Couch is powered by OCMX Live
Contact us on +27 21 791 0292
John MacMenamin 16 Mar, 2009 17:16:37 PM
Well done tut. That's the best I've seen that explained anywhere.