Now this can be altered to your needs, I’m using 0.2 seconds of transition and the “ease” effect. You can pop over to w3c for all the gritty on property. But in short just add this to the css of any link (or other element you have associated a :hover with) and BAM. Nice smooth animation in everything except for IE. (IE10 will support it but that’s not quite out as of this writing)

The css3 transition code

-webkit-transition: all .2s ease;-moz-transition: all .2s ease;-o-transition: all .2s ease;-ms-transition: all .2s ease;transition: all .2s ease;

css3 transitions working example

Here is a working comparison example over at jsbin.

Example 0 (the pre basic)

Before we start getting fancy with replacing our bullets with images, let me show you what you can do using only css changes. There is a nice property in css called list-style-type which can be used on unordered <ul> and ordered <ol> lists. There are a number of declarations available with a range of browser compatibility.

View Example 0 Demo »

HTML

<ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetuer adipiscing elit. Etiam sollicitudin</li>
    <li>Capibus velit. Praesent eget dui.</li>
    <li>Duis non elit et massa ultrices vehicula.</li>
    <li>Aliquam fermentum ipsum auctor enim.</li>
</ul>

CSS

ul {
    list-style-type:square;
}

Example 1 (the basic)

OK, so now you’re (sarcastically) thinking “Wow Jesse, you turned the circle bullet into a square!”. Yea, I know that wasn’t too exciting, the good stuff is on the way. I just thought it would be nice for you to be fully versed in the bullet options (Hey I called it “Example 0″ didn’t I?). Now, when following the links above you may have ran across another css declaration called list-style-image. In theory this is used to do what we are trying to accomplish here: Replace the bullet with a custom image. However, in practice this CSS declaration does not work dependably across browsers. Particularly regarding exact position of the bullet image. That being said we will not be using this declaration, instead will be putting the image onto the <li> using the background: property.

View Example 1 Demo »

CSS

ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
}
ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(scho-arrow.gif) no-repeat 0 7px;
}

Now to explain the CSS a bit. First the <ul>. We remove the bullets with list-style:none;. Next we set the margin. We remove any default margins set by the browsers, set the left margin to 15px to indent the list, and set the bottom margin to 1em to offset the entire list from the content that follows it on the page. We do this by using the CSS shorthand margin:[top] [right] [bottom] [left];. We then set padding:0; to remove any default padding set by the browsers.

Next we adjust the <li>. We set the line-height:1.3em; to give the text some vertical spacing. We then set the top and bottom margin to .25em to give the line items a bit of vertical spacing and the left and right margin to 0 to reset any defaults set by the browsers. Next, we set the padding using shorthand like we did with the margin. We set the top, right and bottom paddings to 0 and then set the left to 15px. This 15px of <li> padding intents the text to make room for the image. You will want to adjust this to a couple px more than the width of your bullet image to make room for the image and give a little extra space before the text starts. Now to keep a uniform indent, I suggest keeping the total of the padding-left of the <li> and the margin-left of the <ul> to 30px. So if you have a smaller image you may end up setting the <li> padding-left to 10px and then setting the <ul> margin-left to 20px. This keeps the text indented 30px from the left side. Finally, we declare the background using the following CSS shorthand: background:[image url] [repeat] [image left pos] [image top pos]; Here you see we’ve declared the background-image, set it to no-repeat, set the left postion to 0 and then the top position to 7px. Now, depending on the height of your bullet image and the size of your text,  you’ll likely want to adjust this top positioning to vertically center your image on the text.

Example 2 (adding polish)

Example 1 got us rolling with the basic idea, but has a few minor issues to work out. First of all, since we set margin-bottom:1em; on the <ul> it causes nested lists to have too much space between the end of a 2nd level list and the next line item of the 1st level list. To fix that, we need to set bottom-margin:0; to all <ul> inside of <li>. Next, there is a small bug that plagues (you guessed it) IE 6 regarding background images that we apply the holly hack to fix. In this example, I’ve added a 2nd level list and a really long <li>. By doing this, you can see why we set the line-height and the top and bottom margin on the <li> in Example 1. Notice how the <li> that wraps still has spacing above and below it to separate it from the surrounding line items? That’s the top and bottom margin at work.

View Example 2 Demo »

CSS – Added

li ul{
    margin-bottom:0;
}
/* Holly Hack to fix ie6 li bg */
/* Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */

Example 3 (real world example)

Now that you’ve got the idea, I’m going to show you a real world example where we tweak a couple things. First, we’re going to set the 2nd level lists back to bullets instead of images. Then we’re going to drop in some print styles so that when the page is printed it shows the default bullets.  We’re doing this because most browsers do not print background images by default and our custom bullets are background images! (Try a Print Preview of Example 3 on your browser to check it out.)

View Example 3 Demo »

CSS

ul{
    list-style:none;
    margin:0 0 1em 15px;
    padding: 0;
}
ul li{
    line-height:1.3em;
    margin: .25em 0;
    padding: 0 0 0 15px;
    background:url(scho-arrow.gif) no-repeat 0 4px;
}
li ul{
    margin:0 0 0 30px;
    list-style:disc;
}
li ul li{
    padding-left:0;
    background:none;
}
/* Holly Hack to fix ie6 li bg */
/*  Hides from IE-mac \*/
* html li{height: 1%;}
/* End hide from IE-mac */
@media print{
ul {
    list-style:disc;
    margin-left:30px;
}
ul li {
    padding-left:0px;
    background:none;
}
} /* end print */

Example 4 (getting creative)

Once you get the hang of this the possibilities are really endless. In this final example I’ll throw a few more styles in there to show you what we could do with a “Yes/No” type of list. I’ve defaulted the list items to “Yes”, but then added a class="no" to <li> that I want to have the “No” look. This could be used in a list of product features etc. To keep the usability, I’ve even set the print styles to an open circle for the “No” items and filled circle for the “Yes”. (yes/no icons from sweetie)

View Example 4 Demo »

When to use CSS image replacement

The typical use of image replacement is for replacing page headings with an image of that text. While I avoid this when I can, I do promote and use this technique for site logos on almost every site I develop. As 99% of companies have logos that can not be created with web fonts, this is a real world application for image replacement that can and should be used on production web sites. Furthermore, Google is OK with image replacement and has confirmed it will help your search engine placement as long as you aren’t falsely representing the image.

Ultimate Image Replacement (The Schoberg Method)

At LJ Host we build a lot of websites, and I have toyed around with a number of different methods over the years and they all do the job to some extent. However, there are a number of caveats with some of the methods including inaccessibility to screen readers and the text being hidden when images are turned off. My method is based on the cover up method created by Petr Staníček [aka -pixy-] and showcased on his site wellstyled.com. My method has added support for linking of the object (I always think it’s a good idea to link the logo to the home page), and making the text printer friendly using print sytles.

Example 1 (the basic)

In the first example I have shown the technique in it’s most simple state. Note the empty <span> tag inside the <a>. This is what allows this method to work. If css is off you see the text. If css is on but images are off, you see the text. However, if css is on and images are on, the <span> is set to the same height and width of the containing <a> and <h1> and then positioned absolutely with the logo image set as the background of the <span>. The logo then overlays the text, showing only the image of the logo, and hiding the text behind it. (Note: Your image must be fully opaque or you will see the text through it.)

View Example 1 Demo »

HMTL

<h1 class="logo"><a href="/">Company Name<span></span></a></h1>

CSS

.logo {
margin:0;
padding:0;
height:45px; /* Height of logo */
width: 210px; /* Width of logo */
overflow:hidden;  /* Stops text from protruding if  H1 text is larger than logo */
position:relative; /*must be relative or absolute */
}
.logo a{
display:block;
height:100%;
width:100%;
}
.logo a span{
display:block;
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
background:url(logo.gif) no-repeat left top;
cursor:pointer; /* ie demands we reinstate the pointer cursor */
}

Example 2 (with print styles)

In example 2 we take things a bit further by adding the print styles. The print styles are essentially reverse engineering the first styles we set. Different browsers handle printing differently. By default, Internet Explorer does not show background images and Firefox does. Furthermore, depending on your logo dimensions and length of company name text, you could run into a number of issues with spacing. We alleviate all these problems by adding print styles. First, we use display:none; to hide the <span> which is the layer containing the logo image. Then we reset the widths and heights of the <h1> and the <a>. Finally we add some margin to the bottom of the <h1> to add some space between it and any following elements on the page for aesthetics. Compare a print preview of the Example 1 and Example 2 demos in a few different browsers to see for yourself.

View Example 2 Demo »

CSS – Added

/* == Optional Print Styles =================================================
===== Put this at the end of your style sheet or in your print style sheet */
@media print{
.logo a span{
    display:none;
}
.logo, .logo a{
    width: auto;
    height:auto;
    text-indent:0;
    top:0;
    left:0;
}
.logo{
    margin-bottom:1em;
}
} /* end print */

Example 3 (real world example)

In the final example I’ve altered the code just a touch by setting the position:absolute; and defining the exact location using top: and left:. I then dropped it into a layout so you can see how it would work in a normal situation, along with some final print styles for the whole layout. (Note: If you use position:absolute; for the h1.logo you must set the containing element to position:relative;)

View Example 3 Demo »

CSS – Tweaked

.logo {
    margin:0;
    padding:0;
    height:45px; /* Height of logo */
    width: 210px; /* Width of logo */
    overflow:hidden;  /* Stops text from protruding if  H1 text is larger than logo */
    position:absolute; /*must be relative or absolute */
    top:25px;
    left:30px;
}

Final Notes

Even though I have called it the “Ultimate” Image Replacement technique there are a couple issues to be aware of.

1. Your image must be opaque. If you have a transparent gif or png then the text from the <h1> will show right through. So this creates a few situations where this method will not work.
2. It does require an empty <span> tag just before the closing </a>. While this doesn’t cause any real performance issues, html purists (myself included) are never too enthused about adding extra markup that has no structural meaning. That being said, I think the cost is worth the benefit in this case.