CSS Gmail style labels

Ever wondered how to generate some cool gmail labels in css? Here is an attempt to imitate the little labels used in gmail. Three tiny colorless images are used to create the rounded borders and the hover effect for the x (removing a label).

The colors are defined in an own class for every li element and so it is very easy to adapt these tiny little fellas to your own needs. Here are some examples:

You can see a demo here: Gmail style labels DEMO

The html structure is made up of an inline list with a span and a link element (the x for removing the label). Unlike in the other posts, I want to start with the html:

<ul class="labels">
 <li class="blue"><span>blue label</span><a href="#"></a></li>
 <li class="lightblue"><span>light blue label</span><a href="#"></a></li>
 <li class="brown"><span>brown label</span><a href="#"></a></li>
 <li class="olive"><span>olive label</span><a href="#"></a></li>
 <li class="pink"><span>pink label</span><a href="#"></a></li>
 <li class="green"><span>green label</span><a href="#"></a></li>
 <li class="violet"><span>violet label</span><a href="#"></a></li>
 <li class="orange"><span>orange label</span><a href="#"></a></li>
 <li class="turk"><span>turkoise label</span><a href="#"></a></li>
 <li class="red"><span>red label</span><a href="#"></a></li>
 <li class="lime"><span>lime label</span><a href="#"></a></li>
 <li class="darkblue"><span>dark blue label</span><a href="#"></a></li>
 <li class="autumn"><span>autumn label</span><a href="#"></a></li>
 <li class="yellow"><span>yellow label</span><a href="#"></a></li>
 <li class="purple"><span>purple label</span><a href="#"></a></li>
 <li class="frost"><span>frost label</span><a href="#"></a></li>
 <li class="black"><span>black label</span><a href="#"></a></li>
</ul>

The first part of the css which you have to put into the header of your html or into your existing stylesheet looks as follows:

/*General Label Style*/

ul.labels{
 font-family: Verdana,Arial,Helvetica,sans-serif;
 font-weight: 100;
 line-height: 13px;
}
ul.labels li{
 display: inline;
 color: #CCCCCC;
 float: left;
 margin: 0px 2px 2px 0px;
 height: 13px;
}

ul.labels li span{
 background: url(label_front.gif) no-repeat center left;
 font-size: 11px;
 font-weight: normal;
 white-space: nowrap;
 padding: 0px 3px;
 color: white;
 vertical-align: top;
 float: left;
}

ul.labels li a{
 padding: 1px 4px 0px 11px;
 padding-top  /***/: 0px9; /*Hack for IE*/
 background: url(labelx.gif) no-repeat center right;
 cursor: pointer;
 border-left: 1px dotted white;
 outline: none;
}
ul.labels li a:hover{
 background: url(labelx_hover.gif) no-repeat center right;
}

In order to give some color to the labels, we have to define some new classes:

/*Colored Label Attributes*/

ul.labels li.pink{
 background-color: #F1A9E7;
}
ul.labels li.lightblue{
 background-color: #99CCFF;
}
ul.labels li.blue{
 background-color: #3019FF;
}
ul.labels li.olive{
 background-color: #CCCC66;
}
ul.labels li.green{
 background-color: #37B700;
}
ul.labels li.brown{
 background-color: #C5AD98;
}
ul.labels li.violet{
 background-color: #CEA6CE;
}
ul.labels li.turk{
 background-color: #8FCDB6;
}
ul.labels li.red{
 background-color: #EE998A ;
}
ul.labels li.orange{
 background-color: #FF9E28 ;
}
ul.labels li.lime{
 background-color: #B6FF00 ;
}
ul.labels li.darkblue{
 background-color: #21007F ;
}
ul.labels li.leaf{
 background-color: #00CC00 ;
}
ul.labels li.yellow{
 background-color: #FFFF00 ;
}
ul.labels li.autumn{
 background-color: #B24700 ;
}
ul.labels li.frost{
 background-color: #80C8FE ;
}
ul.labels li.purple{
 background-color: #8E006B ;
}
ul.labels li.black{
 background-color: #000 ;
}

This makes it really easy to change the appearance of a label.

The images needed to create the rounded borders effect and the x hover effect are small gifs that you will find in the downloadable zip. This works fine with Mozilla, IE (I had to put a 0px hack, sorry), Chrome and Safari. With Opera there is some major problem, I have no idea why, there seems to be an issue with images in list elements. Any ideas are welcome!

I hope it is useful! Here is the complete source with images:

Gmail style labels download