• CSS Sprite Generator

    Sep 30 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!

  • Comments

    1. Elliott at 7:25am on October 22, 2007

    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 11:55am on December 7, 2007

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

    3. Stanislaw Osinski at 10:00am on February 20, 2008

    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 6:09pm on August 7, 2008

    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 4:37am on August 8, 2008

    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 11:28am on August 8, 2008

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

    7. Cruise M at 6:09am on April 18, 2009

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

    8. David H at 1:18pm on May 31, 2009

    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 6:06am on July 24, 2009

    thanks for giving new concept of css..

    Commenting is now closed. Come find me on Twitter.