CSS – Sprites Irregular shapes


Nowadays many CSS designers use CSS sprites instead of sliced images. Dave Shea is one of the first developer came out with this great idea. I mentioned the great advantage of using CSS sprites for rectangle buttons in one of my previous posts(can been viewed here). Recently, I read an article written by Dave Shea, the creator of Zen Garden. From his article, I learned that it was also possible to apply CSS sprites on irregular shapes. The trick is on the master image, instead of just creating two states (hover on and hover off), he split the hover on into many states to avoid overlapping objects.

See the demo below:

http://www.lab.highub.com/css/css-sprite.php

Share and Enjoy:
  • Print
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • Technorati
  • Twitter
  • Yahoo! Bookmarks

, , , ,

  1. #1 by Xixi on February 18, 2009 - 1:27 pm

    Can you show us the exact image that you used? I could only see the CSS by looking at the source code, but not the picture itself.

    Thanks

  2. #2 by Anii on June 28, 2010 - 9:30 pm

    Is there a tutorial?

(will not be published)