web design

Quick Tip: Saving Six Characters

When I write my sans-serif font-family stack in my CSS file I normally use this:

font-family: Raleway, Helvetica, Arial, sans-serif;

Raleway is one of my favorites which I import from the Google Fonts CDN, but you can replace it with whatever custom font you want. Since I prefer Helvetica over Arial, it’s the next font on the list which I’m hoping they have pre-installed. If not the stack falls back to Arial, then the default sans-serif system font.

Now I’ve been writing my font stack this way for several years (sans the custom font) completely oblivious to the ridiculously obvious fact that half of the stack isn’t necessary. The sans-serif piece of the stack asks for the system font which, by default, is Arial on Windows and Helvetica on Mac. If I’m not concerned about the user having changed their default system font, I can cut 16 characters (not including spaces) out of my font stack:

font-family: Raleway, sans-serif;

When I realized this a couple days ago, I subjected myself to an hour of staring at terrible websites as punishment for my ignorance. After recuperating from the debacle I decided to take a closer look at my new font stack. The only issue I have with it is that I don’t trust my Windows users to not have changed their default system font to Comic Sans or Papyrus. Fortunately, Windows will fallback to Arial if you declare Helvetica and it’s not installed! Now my font stack looks like this:

font-family: Raleway, Helvetica, sans-serif;

It’s not a performance saver and it’s not going to impress anybody – actually you’ll look like an idiot if you admit to not having known this already – but it’s a nice piece of info to have when writing your font-stacks.

Advanced Box Shadows

box-shadow is arguably one of the coolest things to come out of CSS3. However I’ve been creating shadows in Adobe Fireworks and Photoshop for years so I feel like I’m too constrained by CSS3′s box-shadow implementation. In an effort to expand my boxy horizons, I set out on a quest to create some cooler shadows. (more…)

Dropdown Menu Transitiony AWESOMENESS

I have struggled a great many times to figure out how to use all of the nifty transitions in my CSS dropdown menus. Some, like fades, are easy. Others, however, require a sacrificial chicken and a prayer to the CSS gods that it’ll work. This post will give a very basic tutorial on building pure CSS menus, then a few cool animations that I’ve figured out.

Disclaimer: At the time of this writing transitions still require browser prefixes to work for Firefox (-moz-), Opera (-o-), and Webkit (-webkit-). I have omitted them from the code examples here for readability but they will be required if you intend to use these techniques. (more…)