Comments on: Diagonal CSS Sprites

By: Kỹ thuật lập trình .com » Jquery Effect » 100 Awesome CSS/Javascript Plugins and Coding Techniques

Tue, 20 Dec 2011 07:54:28 +0000

[...] Diagonal CSS Sprites – Aaron Barker [...]

By: 50 New Useful CSS Techniques, Tutorials and Tools « infirock

50 New Useful CSS Techniques, Tutorials and Tools « infirock — Fri, 04 Nov 2011 04:24:16 +0000

[...] Diagonal CSS Sprites – Aaron Barker So you’ve got your sprite created, and it’s working great. 30+ icons in one image, and major HTTP connections saved. You have made your little corner of the interwebs a little happier and faster. Steve Souders would be proud. [...]

By: 3: Google Waves Goodbye

3: Google Waves Goodbye — Mon, 03 Oct 2011 22:52:08 +0000

[...] http://www.aaronbarker.net/2010/07/diagonal-sprites/ [...]

By: 28 CSS/Javascript Plugins and Coding Techniques | 1 step web design

28 CSS/Javascript Plugins and Coding Techniques | 1 step web design — Fri, 09 Sep 2011 04:50:44 +0000

[...] Diagonal CSS Sprites – Aaron Barker [...]

By: fwolf

fwolf — Thu, 14 Jul 2011 16:27:41 +0000

And if you now run those sprite PNGs throu pngquant (128 colors) or plainly save em as PNG-8 images, you will notice that both are at nearly the same size. The diagonal sprite PNG is about 9% bigger than the regular one, but at 2k thats probably negligible.

cu, w0lf.

By: Bev Ditty

Bev Ditty — Sun, 30 Jan 2011 14:39:54 +0000

Howdy there, are you having issues using the internet hosting? I needed to refresh the web page about substantial number of times to be able to get the web page to run!

By: CSS Sprite Maker – A Useful Fireworks Extension | Euchoice blog

CSS Sprite Maker – A Useful Fireworks Extension | Euchoice blog — Wed, 08 Dec 2010 09:47:11 +0000

[...] “Diagonal CSS Sprite” you can find some useful here. After you understand what it is, we can continue~ The same as previous tutorial, I’ll [...]

By: Diagonal Sprites | Craveytrain

Diagonal Sprites | Craveytrain — Fri, 03 Dec 2010 16:15:53 +0000

[...] Diagonal Sprites [...]

By: Cory Duncan

Cory Duncan — Wed, 03 Nov 2010 20:33:49 +0000

That would work if for fixed width elements. However, with a fluid width, since it would require a % background offset (eg. 0 100%), this solution would not work.

By: Brian Grinstead

Brian Grinstead — Wed, 03 Nov 2010 18:54:59 +0000

Aaron,
I have been working on a sprite generator that uses FileReader and Canvas to run inside of your browser without any uploads. It is still in super early stages and probably has some bugs, but you motivated me to add a diagonal mode in it. See instantsprite.com and let me know what you think.

One thing I am still trying to work out is how the HTML/CSS should be generated. Every case is different. Sometimes I want to use it on the side of a paragraph (like you are here), and sometimes I want to have it replace text entirely. Additionally, if you are trying to sprite existing images/css/html, the background positions may be the only thing you are interested in…

The maintenance is something that has been mentioned that is really important to me. I usually only sprite small images that are being used for one purpose per sprite, so copy/paste generated CSS works pretty well for me (my images don’t change THAT often), but if anyone has ideas how a tool could make that easier, I’d consider adding it in to Instant Sprite.

Brian