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 on October 22nd, 2007

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 on December 7th, 2007

buildcold

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

3 . Stanislaw Osinski on February 20th, 2008

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 on August 7th, 2008

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 on August 8th, 2008

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 on August 8th, 2008

anita brown

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

7 . Cruise M on April 18th, 2009

Cruise M

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

8 . David H on May 31st, 2009

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 on July 24th, 2009

Johnson

thanks for giving new concept of css..

Comments are closed, but I'd still love to hear your thoughts.