In the olden days, video games relied heavily upon sprites given the rather severe limitations of computing hardware at the time.
You can use this “old” technique to reduce the bandwidth load on your server.
Most major web sites use them, but you may never have even heard of a sprite.
But what exactly is an image sprite, and why does it save bandwidth?
Okay, I know this one has been done like 8 bazillion times, but this method of creating a drop shadow on elements in a web page via CSS and a 1 pixel by 1 pixel transparent PNG file actually DOES work.
You see, I tried all kinds of different methods of creating drop shadows in CSS, both with and without an image file, and there was always a problem. It would render properly in certain browsers. It would render properly, but it only worked for fixed-width elements on the page. Or, maybe it would only render properly for variable width page elements. Or, the darn thing just didn’t work at all.
Well, I got tired of all of that, so I decided to make my own version of the CSS drop shadow. It may not be the prettiest, but it works.
I used to hate CSS. I mean, I really, really hated working with CSS at all. Then, one day, I was forced to actually learn it well to design a new web site. It was rough, but I survived.
Don’t ask me why learning CSS was so painful for me, because I can program in a bazillion different languages. For whatever reason, it was just painful. I emerged victorious, however, with the help of a lot of examples I found by searching online.
There was one little problem: the vast majority of examples I found included a little bit of code that will royally screw up all your hyperlinks. So, this post is about how to avoid the #1 CSS mistake: