The other day while working on a web project for a client I was looking for an easy way to switch out images for the different button states (ie. regular, hover, and active) in a typical navigation menu. I’ve always taken what I thought to be the most logical approach and just used CSS to change the background-image depending on whatever state was currently invoked. But, this leads to lag in image load time due to the browser “calling” and waiting for the other image to be served by the web server and sometimes with Internet Explorer this method can cause a flicker effect. Not the end of the world of course but still not desirable.
So, I remember reading about CSS sprites a year or so ago but never used them until the other day. Basically a sprite is an image with many images inside it. Facebook for example takes this to the extreme. They utilize CSS sprites to round the corners of your profile pic and for some other uses as well. Take a look at the linked images and you’ll probably get where this is going.
Basically instead of having multiple images swapped in and out by CSS you create one master image and use CSS to reposition the background-image to suit your needs depending on what section of the sprite you want to display to the user. No load lag and no flicker. Pretty snazzy…
I found two tutorials online which were easy to follow and within minutes I fully understood how to use and manipulate sprites via CSS. The first one I read was written by Dave Shea for the website “A List Apart”. The second one was from “Well Styled”.
Check out both the tutorials above and I’m sure you’ll agree this is the best, most elegant way to do this type of image manipulation. This may be old news so to speak but I thought it was still worth looking at again. I hope you find the info as useful as I did.
Since starting my own web development company recently (more on that some other time) I needed a few hosted development tools to be able to do my thang on the interwebs properly. Basically, other than my Macbook and inexpensive web hosting I needed hosted Subversion access and some sort of project management tools.
I could of paid for Springloops Subversion and Basecamp for project management but those services aren’t cheap. After digging a bit I found XP-Dev. They offer subversion hosting and basic project management tools for free. XP-Dev’s product isn’t as “pretty” as the paid ones but it gets the job done and the service is reliable.
Anyway, if you’re in the market for inexpensive (i.e. free) web dev tools like Subversion and/or some form of online project management tools, check out XP-Dev.
