52 ms·
Sprite Cow – Generate CSS for sprite sheets
- sergiotapia 13y agoThis is awesome. I can see myself having a sprites.scss file specifically for these and just copy pasting the rules.
- nathos 13y agoIf you really want to blow your mind, you should look at the automated spriting in Compass: http://compass-style.org/help/tutorials/spriting/ http://compass-style.org/help/tutorials/spriting/
- krallin 13y agoOr look at Glue : ) https://glue.readthedocs.org/en/latest/ https://glue.readthedocs.org/en/latest/
- bazzargh 13y agoThere's also http://csssprites.org/ http://csssprites.org/ (SmartSprites). The web based tools aren't really in the same category as Compass, Glue and SmartSprites - they can't be part of an automated build, so someone is going to have a repetitive manual task to do. Ok for a one-off, but annoying in the long term.
- dictum 13y agoIs there a solution for automated sprites with Sass when you can't use Compass?
- riffraff 13y 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).
- deleted 13y ago[deleted]
- mkesper 13y ago?
- DanielStraight 13y agoCreating 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.
- mkesper 13y agoThanks! I like sites that have a small but helpful "about" section. :)
- Pitarou 13y ago!
- alixaxel 13y agoSo cool and useful, I will use this all the time now!
- markdown 13y agoHN frontpage? This is at least 5yrs old - that guy
- jaffathecake 13y agoWell, 2.5 years.
- willmacdonald 13y agoMuch simpler: http://spriteme.org/ http://spriteme.org/
- Timothee 13y agoThis 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.
- deleted 13y ago[deleted]
- jackmoore 13y agoI can't wait for the sprite era to end.
- jenius 13y agoI 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.
- dictum 13y agoCorrect 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.
- undoware 13y agoYou stand corrected. You can embed the assets as base64 'data-uri' hrefs. Which IMO is the correct approach; sprites smack of the sort of suboptimal overoptimization that complicates workflow and exerts an invisible, mammoth drag on development, by slightly elongating each code-test-debug cycle. You have to get your raster assets -- which, let's face it, are probably being stored in .xcf or .psd format -- into a single .psd (or .xcf; hereinafter implied) so that a proper .png payload can be generated. Then you have to have either logic or CSS mess (or yes, SASS, or ...) to unpack that payload. The whole process is just so obnoxious. Why not just generate base64 strings and apply them to the site with jade (or grunt + jade, or grunt + ...0. SO MUCH EASIER. No scripting Photoshop (ew, COM+). No Guile, so you don't have to be up on your lambdas. Just use the tools you already use. And, oh, IE8 does data URIs. Why aren't we all doing this again? Oh yeah, I forgot to write the blog post. :/
- sampk 13y agoMe too. I've been waiting for Media Fragments URIs to be implemented since forever: http://css-tricks.com/media-fragments-uri-spatial-dimension/ http://css-tricks.com/media-fragments-uri-spatial-dimension/
- 13y ago
- beernutz 13y agoI 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 13y agoThanks 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 13y agoFor 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/ http://compass-style.org/help/tutorials/spriting/) Spriting. Along with using SASS, it will make creating and maintaining sprites a lot easier.
- ShaunB 13y agoBeen 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 http://www.codeandweb.com/texturepacker) handy. Out of interest, does anyone use a web-based sprite/atlas generator exclusively when working?
- TallboyOne 13y agohttp://pineapple.io/resources/tagged/sprites http://pineapple.io/resources/tagged/sprites
- LocalPCGuy 13y agoI still prefer Texture Packer (http://www.codeandweb.com/texturepacker 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.