1

I have an image that has a lot of icons, and I want to find out the exact image location of each icon using css sprites and the css that is should use, is there a tool that I can use to do that for me, or give me the locations?

bpeterson76
  • 12,918
  • 5
  • 49
  • 82
pingpong
  • 1,157
  • 4
  • 19
  • 32

3 Answers3

3

Sprite Generators:
 -  http://css-sprit.es/
 -  http://csssprites.com/
 -  http://spritegen.website-performance.org/
 -  http://spriteme.org/
 -  http://collamo.jp/Tonttu
 -  https://github.com/aberant/spittle
 -  https://github.com/shwoodard/active_assets
 -  http://duris.ru/

Good tutorials:
 -  http://net.tutsplus.com/articles/news/exactly-how-to-use-css-sprites/  -  http://www.smashingmagazine.com/2009/04/27/the-mystery...
 -  http://css-tricks.com/css-sprites/
 -  http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites
 -  http://www.alistapart.com/articles/sprites
 -  http://www.websiteoptimization.com/speed/tweak/css-sprites/

Advantages of using CSS Sprites:
 -  What are the advantages of using CSS Sprites in web applications?
 -  When CSS sprites would be good to use and when not?

Disadvantages of using Sprites
 -  Takes time.
 -  When CSS sprites would be good to use and when not?

Community
  • 1
  • 1
Shaz
  • 15,637
  • 3
  • 41
  • 59
2

A tool like this: http://spritegen.website-performance.org/ will make a sprite for you and generate the CSS to go with it. It won't find the coordinates in existing sprites (how could you do that accurately?!), but it will help to set it up in the first place.

Rich Bradshaw
  • 71,795
  • 44
  • 182
  • 241
1

You can use a tool like this and get background positions of the icons in the sprite.

You need to first upload your image, then select an icon from the sprite. CSS will be generated, just copy the generated CSS and use it in your class.

Other options are

  1. You need to open the image in an image editor like Photoshop. From there you can find the X and Y position anywhere in the image. Please note that left, top is 0,0. Get the x and y position and use like this

    background-position: -310px -123px;

Please note the "-" sign before X and Y co-ordinates.

  1. Start with

    background-position: 1px 1px;

Use Firebug to modify the values on the fly. By trial and error method you can find exact position.

kiranvj
  • 32,342
  • 7
  • 71
  • 76