Grow your CSS skills. Land your dream job.

thumbnails in the markup or in sprites

  • # January 29, 2012 at 10:04 am

    i once asked if i should use sprites or not.
    heres my problem.
    i have 9 thumbnails of pictures. when clicked a lightbox opens a bigger picture.

    originally i used img. in the html markup.
    if i am to change them over to a sprite my html would be fine but my css would grow a lot…
    example:

    thumbnail li{
    background: url(blah blah..)
    }

    li:nth-of-type(1){
    background-position: etc….
    }

    li:nth-of-type(2){
    background-position: etc….
    }

    all the way to 9!

    quite annoying… is this still worth it and should my thumbnails not be in the markup?

    # January 30, 2012 at 5:01 pm

    it is indeed very annoying, but i believe it may be worth it (mainly just to cut down on server requests). there are some tools that make it easier though!

    here’s one i’ve used a few times: http://www.spritecow.com/
    mr coyier himself did this excellent screencast showing how to use it:
    http://css-tricks.com/video-screencasts/105-using-spritecow/

    another approach (one i havnt tried yet, but probably will soon) is to use css preprocessing with compass/sass. check it out here:

    http://compass-style.org/help/tutorials/spriting/

    # January 30, 2012 at 10:48 pm

    Definitely worth it! You could also put the image sprite as a background on the parent

      , assuming the icons will always be in a strait line (or at least in the same pattern as they are in the image). Then you’d just need to define each

    • as float:left, with a width and height equal to that of the icon. Does that make sense?

    # January 31, 2012 at 9:07 am

    ? really? i mean i have the thumbnails in a grid with padding and margins….
    how does that work?
    is this black magic!?

    Viewing 4 posts - 1 through 4 (of 4 total)

    You must be logged in to reply to this topic.

    *May or may not contain any actual "CSS" or "Tricks".