demosthenes.info

I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my projects

CSSslidy: an auto-generated #RWD image slider. 1.5K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Sprite panel example

Tips for Making a Great CSS Sprite Panel

css / sprites

Estimated reading time: 1 minute, 44 seconds

I’ve covered the concept of CSS Sprites previously. In advance of releasing an article on sprites for CSS3, I thought some tips on sprite design and creation would be a good idea:

  1. Create the sprite panel in your vector illustration program of choice.  Creating the icons as vectors gives you the option of exporting the sprite panel at any size, which becomes important later.

  2. Sprite panel exampleUse grids and guides to make sure that the sprite icons line up and occupy the same “box space”. Misaligning the icons will cause them to “jump” when you apply the CSS.

  3. Plan out the icons that you need, and try to create them in the order they will be used on the web page. Doing so makes it significantly easier to slice up and apply the icons with CSS. Traditionally, icon images are created immediately above their paired “mouse over” images on the panel. (The CSS variant I will discuss in the next related article obviates the need for alternative icon images entirely, reducing panel size and CSS complexity).

  4. Try to plan the icons you need beforehand. Adding more icons to the bottom and right of the sprite panel is totally doable, but it is a pain to have to re-export the panel each time you do so. Changing the order of icons on the panel is usually disastrous.

  5. Keep the sprite design clear, simple, and in the same theme. Consider color very carefully. Make the sprites consistent in appearance and style. Sprites tend to be small, so keep details to a minimum.

  6. Export the CSS sprite panel as a transparent PNG for the adaptability to changes in background color (use an alpha-masked PNG for the greatest flexibility).

  7. Export the image at a larger size than is required. Sizing the image down with CSS later will mean that scaling in a browser or a mobile device will preserve more of the image quality. (Exporting at 2× the final image size is a good rule of thumb).

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.