If you’re not using CSS Sprites (also known as the CSS Image Replacement Method) you should be. Many coders seem to fear this easy and basic way to use images with CSS and I’m not sure why.
The benefits of CSS Sprites are plentiful, but you (and your visitors) will benefit from this method ten-fold. For the coder it’s less slicing and cropping of images, and for the user it rids us of that annoying image loading flash when you use CSS to replace background images.
I’ll take you through some quick steps to get started with CSS Sprites.
What’s worse than spending a week coding a brand new design to realize that your site looks like a bloody mess in IE6? Luckily we have a valid way to fix these problems without having to use hacks in our CSS and destroy the completed design that looks good in all other browsers.
IE Conditionals are an easy and awesome (and valid!!) way to insert any IE specific styles* into your code. You can specify styles for just IE6, just IE7 or for both. Not only that you can specifiy styles to affect all versions of IE below any version number. (*actually these conditionals can be used for anything that you want to display to IE specifically)
I don’t know how or what I did ;O but after messing with some stuff this morning I ended up breaking this site in IE6/IE7. I’m sorry for any IE users I don’t have the time to fix it either. Guess you will just have to wait 2 weeks for the new CSSgirl to emerge (possibly sooner)!
So just because I feel bad I’ll throw out another (scaled down) sneak peak of the new design:
I’m a big fan of polaroid’s. I love the fact that you can snap a photo and the camera will spit out a photo for you instantly. I love the style so much in the new version of CSSgirl (to be released within the next two weeks!!!) has incorporated their style in the new design. I thought I’d share how I went about creating the image and the HTML/CSS behind it!
I’ve noticed a lot of sites have a very complicated way of styling the code samples they provide, using multiple span classes and/or inline styles and many, many <br />s. Other times the site just wraps the code in a <code> attribute and doesn’t highlight the different syntaxes.
I’ve written some simple CSS styles to fix this problem. So if you are interested in having your code display as if it was in a text editor with syntax highlighting here is an easy way to do it.
The first example is a sample of CSS code and how it can look when you apply these styles (***This is not the actual styles, just an EXAMPLE):