Sprite Cow – Generate CSS for sprite sheets

http://www.spritecow.com/

by wiradikusuma • 13 years ago

131 27 13 years ago

This is awesome. I can see myself having a sprites.scss file specifically for these and just copy pasting the rules.

nathos• 13 years ago

If you really want to blow your mind, you should look at the automated spriting in Compass: http://compass-style.org/help/tutorials/spriting/

krallin• 13 years ago

Or look at Glue : )

https://glue.readthedocs.org/en/latest/

dictum2• 13 years ago

Is there a solution for automated sprites with Sass when you can't use Compass?

riffraff• 13 years ago

+1 for compass, but one problem with it is that (AFAIK) you can only do png sprites, so you can't do them for animated gif (for spinners and the likes).

mkesper2• 13 years ago

DanielStraight• 13 years ago

Creating a single image file with all your images in it and referencing them in this way lets you use a single HTTP request to load all your images. It's a way of optimizing sites. This is a tool to make generating the CSS needed for this pattern easier.

mkesper2• 13 years ago

Thanks! I like sites that have a small but helpful "about" section. :)

Pitarou• 13 years ago

alixaxel• 13 years ago

So cool and useful, I will use this all the time now!

markdown• 13 years ago

HN frontpage? This is at least 5yrs old - that guy

jaffathecake• 13 years ago

Well, 2.5 years.

willmacdonald• 13 years ago

Much simpler: http://spriteme.org/

Timothee• 13 years ago

This seems to be the other side of the issue: Sprite Me creates a sprite for you from different images while Sprite Cow takes an existing sprite and allows you to get the coordinates and dimensions of any element in that sprite.

Basically the output of the former could be the input of the latter.

jackmoore• 13 years ago

I can't wait for the sprite era to end.

jenius• 13 years ago

I haven't used a sprite in quite a while. Gzipped svgs do the job quite well, are very light, and you don't ever have to worry about resolution. The only downside is if/when you have to support IE8.

dictum2• 13 years ago

Correct me if I'm wrong, but until all widely used modern browsers support SPDY or HTTP2, the number of requests is still a problem only solvable with sprites.

sampk• 13 years ago

Me too. I've been waiting for Media Fragments URIs to be implemented since forever: http://css-tricks.com/media-fragments-uri-spatial-dimension/

syncsynchalt• 13 years ago

Does SPDY reduce/remove the need for sprites?

beernutz• 13 years ago

I get very tired of all the complaints about the age of a site or an article that makes it to the front page.

Please keep in mind, that not everyone starts reading HN when you did. Useful links remain so, and only take up one line on the list of links. Please don't detract from others discovering helpful links/articles.

Thanks for posting this wiradikusuma. 8)

wiradikusuma• 13 years ago

Thanks for your kind words. Sometimes I find interesting link and just submit it to HN, because if it's already submitted, I can read what HNers think about it, and if it hasn't been submitted (or expired), I can hope HNers to comment (and I can read what they think about it). It's the discussion that I'm after :)

akvlad• 13 years ago

For those of you who want a more developer friendly way of working with sprites, I would like to introduce you to Compass (http://compass-style.org/help/tutorials/spriting/) Spriting. Along with using SASS, it will make creating and maintaining sprites a lot easier.

ShaunB• 13 years ago

Been a useful tool for long while now. People looking to create texture atlases/sprites might find a tool like Texture Packer (http://www.codeandweb.com/texturepacker) handy.

Out of interest, does anyone use a web-based sprite/atlas generator exclusively when working?

TallboyOne• 13 years ago

http://pineapple.io/resources/tagged/sprites

LocalPCGuy• 13 years ago

I still prefer Texture Packer (http://www.codeandweb.com/texturepacker) - it has a free mode, but the best sprites will be made with the paid version. While it seems to be targeted towards mobile and games, but works very well for CSS sprites also. Does a nice job generating both the CSS and the Sprite image. Really simplifies the ability to have multiple developers working on a single sprite.

Sprite Cow – Generate CSS for sprite sheets

Related Stories