If you’re a web developer, you’ve probably used Google’s Material Design Icon font. It’s a great way to include 1 small file and get gajillions of icons – instead of making 20 different pixel sizes of numerous icons, and then creating sprites and all that jazz.
The trouble is that until now, there was no reference for PAST versions of the MD icon font. You’re supposed to just load it from Google’s servers and be happy.
But what if you you don’t need 1800+ icons at 102kB in file size?
What if an older version of the MD icon font is just fine, you want to load the font file from your own servers or CDN, and you just want to know what icons are available in that older version?
Now, you’re all set!
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: