Three Ways to Simplify Your CSS3 Lifestyle

A quick post to throw some props out to a few great services that have helped me on some recent projects where I wanted HTML5 & CSS3 features today, that weren’t going to work or would have been more difficult until some distant tomorrow without them.

Prefix Free

How f-blast-bombing annoying is it to setup CSS3 browser prefixes? The answer? Very, very annoying, especially for gradients. In comes Lea Verou’s -Prefix-Free. Add a Javascript file to your site and one line of code to your pages and voila, no more entering in lousy prefixes.

screenshot of icomoon


Using fonts for icons is the way to go. Now that I’ve gone that route, I don’t think I’ll ever go back. It’s a bit more involved, especially if you want custom icons, than just creating sprites in Photoshop, but I think the benefits are well worth it.

In comes IcoMoon, a nifty service that allows you to upload your own fonts or use some of their prebuilt ones. The best part? It allows you to choose specifically which icons (ie, font characters) you want to use, so you don’t end up loading an entire massive font file just for a few icons.

screenshot of the Sprite Cow interface

Sprite Cow

I’ve discussed using sprites as a way to minimize HTTP requests and build a better, faster website. Using sprites however is far from easy when it comes time to setup your background images. Sprite Cow makes it ever so easy to get the exact code you’ll need to make all of your background sprite image desires come true!

The best part about all three of these services? They’re each completely free. Have at it!

Up Next: Quick Walk Through on How to Customize the Default WordPress TwentyEleven Theme