Replacing Icons with CSS

I love using Photoshop to create fancy looking web graphics, who wouldn’t. The ability to author your own unique web elements gives a certain satisfaction. Unfortunately, that satisfaction is usually yours alone!

While you may appreciate your graphic elements, for the most part, web users don’t. They are used to the consistent rendering provided by web browsers that follow standard graphic conventions. While you may associate the word convention with a lack of creativity and uniqueness, you shouldn’t. The standards that web browsers follow when it comes to styling are meant to provide flexibility in your design.

Beyond convention and consistency though, there are other reasons to avoid creating button graphics. Next on the list would be page load. Each button graphic requires that your browser initiate another HTTP connection with the web server to download the graphic and optionally place it in it’s cache.

Third in line comes changeability. Once you have an image file representing a button or other web element, you need to change it with image editing software. By sticking to the confines of CSS alone, you are setting yourself up for quick turnarounds as far as style and color changes go.

Before we get to our CSS-only graphics example, let’s summarize the advantages of avoiding graphics files:

1. More consistent interface expected by your web users.
2. Fewer HTTP connections, leading to a faster page load.
3. Easier to make revisions to the web element’s style.
4. More search engine friendly, as any text within the element is readable as HTML content.
5. Scaling – the ability to scale the actual size of the element without affecting it’s quality.

CSS Only Arrow Buttons

Pure CSS arrow buttons aren’t seen enough on the web. The capability to produce them with CSS alone has been around as long as CSS itself. You need nothing more than the border style to achieve button arrows. That being said, for more modern effects, such as rounded corners, CSS 3-specific styles are required. Although the CSS 3 border-radius style is required for rounded corners, it will simply be ignored in older browsers, producing a squared corner.

The example below is pulled directly from a mortgage calculator that I’m current developing. The button arrows seen below are produced with only 4 lines of HTML (and supporting CSS of course).

The HTML

<div id="share-features-nav">
  <div id="share-features-nav-next"><span></span></div>
  <div id="share-features-nav-prev"><span></span></div>
</div>

The CSS

#share-features-nav { position: relative; }
#share-features-nav div { 
    cursor: pointer; width: 12px; height: 12px; 
    padding: 3px 2px 3px 4px; 
    border-radius: 12px; background: #cadded; 
}
#share-features-nav div span { 
    display: block; width: 0; 
    height: 0; margin: 0 auto; line-height: 12px; 
}
#share-features-nav-prev { padding: 3px 4px 3px 2px !important; }
#share-features-nav-next { float: right; }
#share-features-nav-next span { 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-left: 6px solid #2994e2; 
}
#share-features-nav-prev span { 
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent; 
    border-right: 6px solid #2994e2; 
}

The syntax-highlighted version of the code above can be found here: http://www.sitekickr.com/coda/css/next-previous-navigation.html

The example above is, of course, only one of the many CSS substitutions that can be made to eliminate image graphics. I urge you to search the web for additional examples, to find out how you can streamline your site and improve it’s load time and graphic flexibility.

I’d urge you to look into CSS 3 styles such as border-radius, text-shadow, box-shadow, multiple backgrounds and the ability to apply opacity to a background alone, using the RGBA color model (A for alpha).