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:
Nice one Chris, really useful. SpriteCow looks like an awesome bit of kit. I’m definitely going to start using it!
Great Screencast as always! It seems the css almanac will be amazing! :)
Cheers
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.
Great Vid!
Hiding the text with {color:transparent} @13:41 would be fine too i guess. Am I wrong?
I use SpriteCow from one 1 year for all my CSS sprites! Great and simple way to use-it.
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.
Adding absolute positioning to the psuedo element is usually my work-around for your text-indent problem.
Definitely a huge fan of SpriteCow!
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.
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!
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.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.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!
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 :)
Awesome!
This was awesome, I’m quickly becoming a Spritecow addict.
.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.
It still takes up room then.
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!
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.
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
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.
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
Hi Chris,
Noticed some interesting buttons in your WP TinyMCE, i.e the jQuery button… what is that and how did it get there?
http://wordpress.org/extend/plugins/addquicktag/
Ty Chris.
Hehe..Awesome video..Enjoyed it :D
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.
Yo can also use images caching so it would only have to be downloaded once.
Was it just me or did you call Safari “IE” when you were getting the icons from your article? Ruh roh!
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!
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……….
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.)
Here’s my favourite way to hide the text component of a sprite. With your image, it would look something like this:
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.
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)
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.
Another video without planning that could have been done in 5 minutes.
Im sorry but they´re getting dull men :(
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.
Thanks, great Tool.
I really hate measuring it by hand so this is very handy for future Projects!
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?
How come SpriteCow works for Chrome but not Safari? They’re both webkit.
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?
really great tutorial and also super funny and entertaining! ever thought about standup wordpress comedy? :)
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.
Thanks man good site…
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.
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.
Great screencast!
i just learned this site. Thanks
Have you seen this? i’ve just about to tryit… sounds like a perfect companion
Have you seen this? i’ve just about to tryit… sounds like a perfect companion
http://arnaumarch.com/en/sprites.html
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?
Robot voice part was hilarious, I had to repeat it;)
you could resolve the sprite problem without using span ,if you would make the sprite image vertical with no-repeat.
Something similar to spritecow, http://getspritexy.com I use this.
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!
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/
Also I am using http://www.retinaspritegenerator.com
It makes retina sprites easily!
I freaking love this video. First time running into any of you stuff. Wow…it would be a dream to work for you.