Comments on: A manageable method for creating CSS image sprites http://www.lifeathighroad.com/web-development/quick-tips/a-manageable-method-for-creating-css-image-sprites/?utm_source=rss&utm_medium=rss&utm_campaign=a-manageable-method-for-creating-css-image-sprites Life as a Director of Front End Development at High Road Communications, Ottawa Fri, 16 Dec 2011 02:17:50 +0000 hourly 1 http://wordpress.org/?v=3.3.1 By: Craig http://www.lifeathighroad.com/web-development/quick-tips/a-manageable-method-for-creating-css-image-sprites/comment-page-1/#comment-2470 Craig Fri, 13 Aug 2010 16:13:19 +0000 http://www.lifeathighroad.com/web-development/quick-tips/an-manageable-method-for-creating-css-image-sprites/#comment-2470 Good thing I use Fireworks. I never knew it was so hard to do this in Photoshop. Properties inspector saves the day when it comes to making sprites and getting coordinates. Of course, Ps was never intended to be used for creating website assets, that's what Fw is for. Good thing I use Fireworks. I never knew it was so hard to do this in Photoshop. Properties inspector saves the day when it comes to making sprites and getting coordinates.

Of course, Ps was never intended to be used for creating website assets, that’s what Fw is for.

]]> By: Mike http://www.lifeathighroad.com/web-development/quick-tips/a-manageable-method-for-creating-css-image-sprites/comment-page-1/#comment-2438 Mike Fri, 09 Jul 2010 12:34:40 +0000 http://www.lifeathighroad.com/web-development/quick-tips/an-manageable-method-for-creating-css-image-sprites/#comment-2438 Thanks Ed. The whole purpose of creating image slices (within Photoshop) for each image in the sprite is to avoid needing a calculator to determine the various <code>width</code>, <code>height</code> and <code>background-position</code> properties. This way, when you open up a particular image slice's properties (by double click on it with the image slice tool), it will show you the correct values - and more importantly, the <code>x</code> and <code>y</code> positions that you can simply plug into your <code>background-position</code> CSS rule. Thanks Ed. The whole purpose of creating image slices (within Photoshop) for each image in the sprite is to avoid needing a calculator to determine the various width, height and background-position properties. This way, when you open up a particular image slice’s properties (by double click on it with the image slice tool), it will show you the correct values – and more importantly, the x and y positions that you can simply plug into your background-position CSS rule.

]]> By: Ed http://www.lifeathighroad.com/web-development/quick-tips/a-manageable-method-for-creating-css-image-sprites/comment-page-1/#comment-2437 Ed Fri, 09 Jul 2010 12:22:23 +0000 http://www.lifeathighroad.com/web-development/quick-tips/an-manageable-method-for-creating-css-image-sprites/#comment-2437 nice tut! not sure about the ugly border, but i like the idea of using the sprite tool! beats having hundreds of guides on the file and having the calculator tool open the whole time. nice tut! not sure about the ugly border, but i like the idea of using the sprite tool! beats having hundreds of guides on the file and having the calculator tool open the whole time.

]]>