I came across another article on CSS Sprites today and it got me thinking of a better way to generate CSS sprites. CSS sprites to me have always been difficult and un-yielding. As a developer I love flexibility; and bundling all of my images into one, then mapping pixel boxes to different css backgrounds doesn’t sound flexible at all. I can see it being very useful after i’ve had the site up for a while, and i’m dead set on images, but during the infancy of a website they’ve always seemed too clunky and time consuming to produce.
CSS Sprites Tricks
What I would love to see is an easy to use solution much like similar to Bundle Fu’s ability to bundle javascript and css, we could use another plugin to dynamically create the sprite, the css, and even propose new html markup that would work with those sprites. It wouldn’t be too difficult Here’s how it could work:
- Point ruby at a website, and grab all of the images.
- Take those images into rmagic and determine optimal size of compiled image
- Individually add each image to the compiled image keeping track of the pixel locations
- For each image added, create a css entry with the pixel locations provided and a class name based on the name of the image
- Wash rinse and repeat till you have a fully compiled image, and css ready to use
- Bonus: generate .html.erb file that replaces the images currently in use
It wouldn’t be too difficult, and it would save alot of developers quite a bit of time…if any other develoers would be interested in trying to do this, let me know and i’ll help out. For now it’s just a pipe dream, but if i get enough interest and most importantly time, then i’ll see what i can crank out.
2 Responses
Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.
Hey, This is cool but still I m trying hard working with css sprites.. I want to make it possible in my next project..
I have used plugins css sprite, image bundle, spritemaker code and many other tricks but could not make possible it locally, Can you please suggest what are the simple steps can be there to solved it in real.. ?
Thanks in advance
If you want to get started with CSS sprites i recommend http://www.alistapart.com/articles/sprites . Most sites don’t really need them, but it is good to have if you’re trying to decrease the number of http requests, or speed up the user experience. This post was more of a concept than an action item. If you have specific questions about CSS or web development i recommend http://www.stackoverflow.com