The EASY way to use Material Design Icons

Material Design Icon Font ViewerIf 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!

(more…)

Understanding Embed Codes

Embed CodesYou have probably encountered embed codes before, but they may seem like a bit of a mystery.

An embed code is, in short, a bit of HTML that allows you to embed part of another web site on your own – like a YouTube video, for example.

Embed codes come in two general flavors these days, and each has its strengths and weaknesses.

So, how do embed codes work? Why are some hugemongous, and others teeny-tiny? Are iframe tags really the spawn of the devil?

Read on!

(more…)

Scottie’s SuperDuper CSS Drop Shadow

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.

(more…)