Coding with Jesse

CSS Sprite Generator

September 30th, 2007

Finally, there is an automated CSS Sprite Generator (via)! Just upload a zip of graphics and it will spit out a single image and a block of CSS you can use.

What are CSS Sprites? If you use a ton of CSS backgrounds for things like icons, buttons and other non-repeating graphics, then you can combine them into a single graphic and use background-position with width and height to show a slice of the larger graphic. This can make a site load faster since there are less files to download.

This is generally a pain to do by hand (not only combining the graphics, but calculating and remembering pixel positions), but with a tool like this it should be a cinch!


Interested in web development? Subscribe to my newsletter!

Comments

1 . Elliott at 2007-10-22T11:25:25.000Z

Elliott

Hi

The sprite generator is a great idea. Sprites are the way foward, as you say it is fine making the images, but CSS can be a chore - I always find the sprite CSS rather counter intuitive.

Looking forward to trying it out.

2 . buildcold at 2007-12-07T16:55:57.000Z

buildcold

hei;
it is very nice ,is it have desktop app version?

3 . Stanislaw Osinski at 2008-02-20T15:00:37.000Z

Stanislaw Osinski

Hi!

Nice tool indeed! I've just released a tool that does the same thing, but using a different approach allowing greater flexibility and significantly reducing manual work. Only desktop version is available at the moment, if there is demand, I'll build a webapp too.

Download from:

http://smartsprites.osinski.name/

4 . anita brown at 2008-08-07T22:09:15.000Z

anita brown

Having a bit of a problem using the sprite slices and dice...
I have 8 images that make up a rounded corner box that expands or contracts based on the amount of data returned on a page vertically and horizontally.

Without a sprite, I called 8 individual images stacked at the beginning of a section like this:

<div class="uedge"><div class="redge"><div class="bedge"><div class="ledge"><div class="ulcorner"><div class="urcorner"><div class="blcorner"><div class="brcorner">

I combined the 8 images into one zip file and used the Sprite Generator to create the new image.

When I change the CSS to point to the location identified in the generated file, all the images display and the rounded corner box no longer behaves as expected. (All the images display in a row down the page like the combined file.)

OLD CSS

.mainfeature .uedge, .tabbedfeature .uedge {
background: transparent url(images/topborder.gif) left top repeat-x;

}

.mainfeature .redge, .tabbedfeature .redge {
background-color: transparent;
background-image: url(images/rightborder.gif);
background-position: top right;
background-repeat: repeat-y;
}

.mainfeature .bedge, .tabbedfeature .bedge {
background-color: transparent; background-image: url(images/bottomborder.gif);
background-position: bottom left;
background-repeat: repeat-x;
}

.mainfeature .ledge, .tabbedfeature .ledge {
background-color: transparent; background-image: url(images/leftborder.gif);
background-position: top left;
background-repeat: repeat-y;

}

.mainfeature .ulcorner {
background-color: transparent;
background-image: url(images/left-top.gif);
background-position: top left;
background-repeat: no-repeat;
}

.mainfeature .urcorner, .tabbedfeature .urcorner {
background-color: transparent;
background-image: url(images/right-top.gif);
background-position: top right;
background-repeat: no-repeat;
}

.mainfeature .blcorner, .tabbedfeature .blcorner {
background-color: transparent;
background-image: url(images/left-bottom.gif);
background-position: bottom left;
background-repeat: no-repeat;
}

.mainfeature .brcorner, .tabbedfeature .brcorner {
background-color: transparent;
background-image: url(images/right-bottom.gif);
background-position: bottom right;
background-repeat: no-repeat;
}

.mainfeature .top, .tabbedfeature .top {
background-image: url(images/topborder.gif);
background-position: top left;
background-repeat: no-repeat;
}

.mainfeature .bottom, .tabbedfeature .bottom {
background-color: transparent;
background-image: url(images/bottomborder.gif);
background-position: bottom left;
background-repeat: no-repeat;
}

.tabbedfeature {
}

.tabbedfeature .title {
color: #00344D;
}

.tabbedfeature .ulcorner {
background-color: transparent;
background-image: url(images/left-topcorner.gif);
background-position: top left;
background-repeat: no-repeat;
}

New CSS

.mainfeature .uedge, .tabbedfeature .uedge {
background: transparent url(images/contenttabs.gif) left -112px repeat-x;
}

.mainfeature .redge, .tabbedfeature .redge {
background: transparent url(images/contenttabs.gif) right -282px repeat-y;
}

.mainfeature .bedge, .tabbedfeature .bedge {
background: transparent url(images/contenttabs.gif) left -146px repeat-x;
}

.mainfeature .ledge, .tabbedfeature .ledge {
background: transparent url(images/contenttabs.gif) left -248px repeat-y;
}

.mainfeature .ulcorner {
background: transparent url(images/contenttabs.gif) left -180px no-repeat;
}

.mainfeature .urcorner, .tabbedfeature .urcorner {
background: transparent url(images/contenttabs.gif) right -10px no-repeat;
}

.mainfeature .blcorner, .tabbedfeature .blcorner {
background: transparent url(images/contenttabs.gif) bottom -214px no-repeat;
}

.mainfeature .brcorner, .tabbedfeature .brcorner {
background: transparent url(images/contenttabs.gif) right -78px no-repeat;
}

.mainfeature .top, .tabbedfeature .top {
background: transparent url(images/contenttabs.gif) left -112px no-repeat;
}

.mainfeature .bottom, .tabbedfeature .bottom {
background: transparent url(images/contenttabs.gif) left -146px no-repeat;
}

.tabbedfeature {
background: transparent url(images/contenttabs.gif) no-repeat left top;
}

.tabbedfeature .title {
color: #00344D;
}

.tabbedfeature .ulcorner {
background: transparent url(images/contenttabs.gif) left -44px no-repeat;
}

5 . Stanislaw Osinski at 2008-08-08T08:37:18.000Z

Stanislaw Osinski

Hello Anita,

If you'd like to use sprites to make a rounded corner box, you'd need to modify the approach a bit -- instead of using background-position (which is overwritten in sprited CSS), you'll need to have 8 absolutely positioned divs in your box like this:

<div class="box">
<div class="top-left"></div>
<div class="top"></div>
<div class="top-right"></div>
<div class="left"></div>
...
<div class="bottom"></div>
<div class="bottom-right"></div>

Content comes here
</div>

Then you need to appropriately position and size the corner-making divs within the box:

.box { position: relative }
.top-left {top: 0; left: 0; width: 5px; height: 5px }
.top {top:0; left: 5px; right: 5px; height: 5px;}
.left {left: 0; top: 5px; bottom: 5px; width: 5px }
...

For a full working example of this technique, please see the test/real-world-example directory in SmartSprites distribution.

Cheers,

Staszek

6 . anita brown at 2008-08-08T15:28:28.000Z

anita brown

thanks for the insight. I'll give it a shot.

7 . Cruise M at 2009-04-18T10:09:18.000Z

Cruise M

Hi, is there an option to generate horizontal sprites as well ? I like your generator very much.

8 . David H at 2009-05-31T17:18:17.000Z

David H

I am looking for an option to generate horizontal sprites as well. I understand horizontal sprites are necessary when using repeat-y in CSS.

9 . Johnson at 2009-07-24T10:06:12.000Z

Johnson

thanks for giving new concept of css..