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..

Add a Comment