Grow your CSS skills. Land your dream job.

#105: Using SpriteCow

In which I take a real example of somewhere I knew using sprites would be a good idea, create the sprite by hand in Photoshop (my preferred method), and then use SpriteCow to help with the exact position values needed to use the individual images. Pseudo elements are also used to help maintain accessibility.

Links from the video:

Comments

  1. Nice one Chris, really useful. SpriteCow looks like an awesome bit of kit. I’m definitely going to start using it!

  2. Permalink to comment#

    Great Screencast as always! It seems the css almanac will be amazing! :)

    Cheers

  3. Permalink to comment#

    At some point in my life I want to give those devs a hug. Sprite Cows looks amazing. Now I need to play with it.

    Great share Chris.

  4. Zsitro
    Permalink to comment#

    Great Vid!
    Hiding the text with {color:transparent} @13:41 would be fine too i guess. Am I wrong?

  5. I use SpriteCow from one 1 year for all my CSS sprites! Great and simple way to use-it.

  6. Great video – I know it was all about sprites – but “Trim” in photoshop – might change my life, was always doing it a harder way for a long time.

    Hope this helps you too: http://jsfiddle.net/KzK4W/ I didn’t do all the sprites or anything – but positioning seemed to fix the pseudo element troubles.

  7. Adding absolute positioning to the psuedo element is usually my work-around for your text-indent problem.

    Definitely a huge fan of SpriteCow!

  8. Stephen
    Permalink to comment#

    Just as an idea, if you made the sprite vertical since it seems your thead height is fixed, that might solve the issue without the extra span and pseudo element.

  9. Permalink to comment#

    Really enjoyed this vid! Good to know there’s nothing fundamentally wrong with my sprites workflow.

    By the way, as others noted before me, Trim in Photoshop. Best. Thing. Today. Thank you!

  10. Permalink to comment#

    This totally untested because it’s early and I’m tired but I’m wondering if you can reset the text-indent on the pseudo element like th:before { text-indent: 0; } to prevent it from inheriting the parent indent value.

  11. Permalink to comment#

    If you make the sprite vertical instead of horizontal you can get rid of the pseudo elements and extra span markup.

    Also, if you give the <th> tags with browser icons an extra class like this, <th class="browser-icon chrome">, you can use this new class in your css rule to designate the background image instead of listing all of them.

  12. Kristof
    Permalink to comment#

    Why would you hide that text? I think it’s very possible someone doesn’t know all of these browsers.

    To disable the sprite as a background on the second table header you could have used a “+” so that the background image only applies to the first table header and not to the other table headers.

    Awesome screencast, spritecow is now a proud member of my bookmarks collection!

    • Grooby
      Permalink to comment#

      If someone arrives at this site and doesn’t recognize one of those browser logos then I’m not entirely sure they know something more complex (such as CSS). At least I’d hope anyone proficient with CSS knows these logos.

      Maybe a tooltip can help those without logo recognition skill :)

  13. Grooby
    Permalink to comment#

    Awesome!

  14. Permalink to comment#

    This was awesome, I’m quickly becoming a Spritecow addict.

  15. Toni Lähdekorpi
    Permalink to comment#

    .browser-support-table th { color: transparent; }

    Problem solved.

    I don’t get the idea of trying to position the content out of frame when trying to hide it. It just _so_ hackish and just feels wrong, not to mention that it might not always work when dealing with huge screens, animations etc.

  16. Permalink to comment#

    I was just talking to a co-worker about how we use sprites or background position every day. This will make my life so much easier! Thanks for the video!

  17. Permalink to comment#

    Chris,

    Great video, many thanks. I am looking forward to the CSS Almanac — that’s a great idea. It’ll be nice to have a one-stop reference for CSS.

    I sometimes use the one on the MDN, but I don’t feel that it covers everything.

  18. like this tut

    saw spritecow a year ago, never used it
    will give it a shot

    my first encounter with CSS sprites was here

    http://cssglobe.com/post/3028/creating-easy-and-useful-css-sprites

  19. Permalink to comment#

    I love SpriteCow, it has solved all my problems. Thank you very much, Chris and “theTeam”!

    It helps a lot when using images on what I like to call a “TinySite” – practically one page, with one stylesheet. Designed to load super-ridiculously fast.

    I call something super-fast when Shift+F5 takes the same time as F5.

  20. phantom.omaga
    Permalink to comment#

    awesome!!! i love it.
    i always wanted to learn how to do this but even didn’t know whats this called so thanks a lot chris

  21. Wayne Swingle
    Permalink to comment#

    Hi Chris,

    Noticed some interesting buttons in your WP TinyMCE, i.e the jQuery button… what is that and how did it get there?

  22. Hehe..Awesome video..Enjoyed it :D

  23. Great tut, thanks Chris – I’m definitely going to make use of Sprite Cow on my next project.

    I think I’ve found a fix to the text-indent problem. While watching the video I had a suspicion the problem was “inline-block” – It should be ‘block’. In practice, however, that didn’t solve it until I also changed :before to :after. So between display: block and :after, it works nicely =) – I’m assuming it’s some sort of th:before bug, but I’m not sure.

  24. Permalink to comment#

    Yo can also use images caching so it would only have to be downloaded once.

  25. Eddy
    Permalink to comment#

    Was it just me or did you call Safari “IE” when you were getting the icons from your article? Ruh roh!

  26. Permalink to comment#

    Hey Chris
    Watched this today and thanks for the great tips.
    Got myself a good laugh at 19min in. “- Why am i talking like this….” Thanks for the laugh and your positive way!
    Have a great day
    /Torbjörn from Sweden

    By the way, i really like the CSS article idea!

  27. Permalink to comment#

    Great tutorial Chris and the way you narrated is amazing. Keep rockin. I have used my first image sprite in a client’s project. Thanks a lot……….

  28. billseymour
    Permalink to comment#

    Appreciate the tutorial and the link. A question: When using sprites that handle changes (unselected, hover, etc), I often have sprites of different sizes. Example: ‘selected’ sprite has a fancy underline as part of the sprite (making a wider sprite), where ‘unselected’ does not have the underline.

    Trying this type of sprite out in Spritecow, if the sprites are transparent pngs, it seems to me that I still have to figure out how to match the positions of the ‘selected’ and ‘unselected’ sprite. (I had the thought of using Spritecow on sprites having backgound dimensions of the desired size, then on the website using the same sprite but minus any background. This would allow me to get position from Spritecow, with sprites properly lined up.)

  29. Permalink to comment#

    Here’s my favourite way to hide the text component of a sprite. With your image, it would look something like this:

    .sprite {
        background: url(sprite.png) no-repeat;
        width: 0;
        padding-left: 34px;
        overflow: hidden;
    }
    .sprite1 { background-position: -100px 0; }
    

    That’s the gist of it. It’s so nice and clean, and I use it all the time. No pseudo-elements required, so cross-browser support is stellar. The key elements are:
    - setting either the width or height of the block to 0
    - setting the padding to be the height or width of the sprite
    - hiding the text contents by setting overflow: hidden

    This technique has been around forever, and I’m surprised it wasn’t your first choice to hide the text. Am I missing something here?

    • I should mention — this only works on blocks. If you want to use this with an inline element (like an <a>), you’d have to set the display to inline-block or block.

    • Permalink to comment#

      Ooo.. Hadn’t thought of that. Will give it a whirl next time. I to think the text-indent is a bit of an oddun.
      I imagine sites on massive new internet TV’s or when zoomed out with these random bit of utility text of to the far left when the px is too low (hence using em usually)

  30. Marshall Ford
    Permalink to comment#

    If all you want make is a horizontal sprite then you should try csssprites.com. It creates a png and give you the code.

    Plus if you keep the tab open, you can change your sprite on the fly during the development stage.

  31. Another video without planning that could have been done in 5 minutes.
    Im sorry but they´re getting dull men :(

    • Jordan Pagels

      I disagree. I mean, yes, to show only what was called out in the title, the video could have been much shorter, but watching the problem solving process another professional uses is really helpful. I think that getting to compare someone else’s workflow to your own is always a great opportunity.

  32. Thanks, great Tool.
    I really hate measuring it by hand so this is very handy for future Projects!

  33. I haven’t really thought this through but couldn’t you use text-indent -9999px and then bring the pseudo element back with a margin or position relative?

  34. How come SpriteCow works for Chrome but not Safari? They’re both webkit.

  35. Robert
    Permalink to comment#

    I don’t fully understand why you needed the pseudo element. Is it because it would have been affected by the text indent? If that’s the case, why was it not affected even though it came :before?

  36. Andreas
    Permalink to comment#

    really great tutorial and also super funny and entertaining! ever thought about standup wordpress comedy? :)

  37. nahum
    Permalink to comment#

    if you are using fireworks CS5 you only have to select the “icon” or the png imagen and chose the x and y position of the image in fireworks and putting in negative way and works :P.

    so for example if you have and image in x:112 y :250 you only have to do:

    background:url(blablal.png) -112px -250px and will work.

  38. Permalink to comment#

    Thanks man good site…

  39. John
    Permalink to comment#

    Man, I love the way you use the word ‘bugger’ in your videos, very amusing. Excellent stuff as always Chris. This is opening my mind to all sorts of possibilities for reducing http requests now.

  40. Julio Alpizar
    Permalink to comment#

    Una exelente herramienta para facilitar el trabajo con Sprites en CSS. Sprite Cow ayuda en el trabajo de ubicar una imagen de fondo en diferentes posiciones sin tener que pasar por un proceso de prueba y error.

    Excellent video Chris, I am posting in Spanish so that this wonderful video can be found by Spanish speakers.

  41. Cihad
    Permalink to comment#

    Great screencast!
    i just learned this site. Thanks

  42. Isaac Díaz Mendoza
    Permalink to comment#

    Have you seen this? i’ve just about to tryit… sounds like a perfect companion

  43. Isaac Díaz Mendoza
    Permalink to comment#

    Have you seen this? i’ve just about to tryit… sounds like a perfect companion

    http://arnaumarch.com/en/sprites.html

  44. Permalink to comment#

    Cool video, nice to see other developers go “why is it not working, it should be working???”
    Would “.browser-support-table > thead:first-child tr th:before {}” be a cleaner selector for your first row of pseudo declarations?

  45. Robot voice part was hilarious, I had to repeat it;)

  46. Elad Shechter

    you could resolve the sprite problem without using span ,if you would make the sprite image vertical with no-repeat.

  47. Mohna
    Permalink to comment#

    Something similar to spritecow, http://getspritexy.com I use this.

  48. Bryce
    Permalink to comment#

    Whoa, what an amazing tool. I keep hearing about SpriteCow, but haven’t taken the time to learn how to use it. Now I can’t imagine making sprites without it. Thanks for the walkthrough, Chris!

Leave a Comment

Current ye@r *

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