#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. User Avatar
    Mike Onslow
    Permalink to comment#

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

  2. User Avatar
    Gabor
    Permalink to comment#

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

    Cheers

  3. User Avatar
    Kevin Dees
    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. User Avatar
    Zsitro
    Permalink to comment#

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

  5. User Avatar
    Florescu Adrian
    Permalink to comment#

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

  6. User Avatar
    Mike Voermans
    Permalink to comment#

    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. User Avatar
    Benjamin Charity
    Permalink to comment#

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

    Definitely a huge fan of SpriteCow!

  8. User Avatar
    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. User Avatar
    Sugarenia
    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. User Avatar
    Tim Wright
    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. User Avatar
    Josh
    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. User Avatar
    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!

    • User Avatar
      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. User Avatar
    Grooby
    Permalink to comment#

    Awesome!

  14. User Avatar
    Jon
    Permalink to comment#

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

  15. User Avatar
    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. User Avatar
    adam
    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. User Avatar
    Whymarrh
    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. User Avatar
    Krsiak Daniel
    Permalink to comment#

    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. User Avatar
    Alex
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Nikhil Sapkota
    Permalink to comment#

    Hehe..Awesome video..Enjoyed it :D

  23. User Avatar
    Jamy Golden
    Permalink to comment#

    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. User Avatar
    rob
    Permalink to comment#

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

  25. User Avatar
    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. User Avatar
    Torbjörn
    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. User Avatar
    Logesh
    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. User Avatar
    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. User Avatar
    Dave Laird
    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?

    • User Avatar
      Dave Laird
      Permalink to comment#

      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.

    • User Avatar
      Paul
      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. User Avatar
    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. User Avatar
    Matias Mancini
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    Benedikt Wolters
    Permalink to comment#

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

  33. User Avatar
    Brendan Patterson
    Permalink to comment#

    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. User Avatar
    Druid of Lûhn
    Permalink to comment#

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

  35. User Avatar
    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. User Avatar
    Andreas
    Permalink to comment#

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

  37. User Avatar
    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. User Avatar
    Webmaster
    Permalink to comment#

    Thanks man good site…

  39. User Avatar
    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. User Avatar
    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. User Avatar
    Cihad
    Permalink to comment#

    Great screencast!
    i just learned this site. Thanks

  42. User Avatar
    Isaac Díaz Mendoza
    Permalink to comment#

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

  43. User Avatar
    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. User Avatar
    Matty
    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. User Avatar
    Artbeard
    Permalink to comment#

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

  46. User Avatar
    Elad Shechter

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

  47. User Avatar
    Mohna
    Permalink to comment#

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

  48. User Avatar
    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!

  49. User Avatar
    ofcyln
    Permalink to comment#

    If someone needs to convert image to CSS this link can help them:

    Base64 CSS Generator
    Online base64 css, dataURI generator. Convert your images easily to base64 CSS, Data URI, XML.

    http://www.base64css.com/

  50. User Avatar
    Peter Ward
    Permalink to comment#

    I freaking love this video. First time running into any of you stuff. Wow…it would be a dream to work for you.

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

Submit a Comment

icon-closeicon-emailicon-linkicon-menuicon-searchicon-tag