css标签中的标签样式_CSS Gmail样式标签

css标签中的标签样式

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).

有没有想过如何在CSS中生成一些很酷的gmail标签？ 这是一种尝试模仿gmail中使用的小标签的尝试。 三个微小的无色图像用于创建圆形边界和x的悬停效果(删除标签)。

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:

颜色是针对每个li元素在自己的类中定义的，因此很容易使这些微小的小家伙适应您自己的需求。 这里有些例子：

You can see a demo here: Gmail style labels DEMO

您可以在此处查看演示： Gmail样式标签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:

html结构由带有范围和链接元素(用于删除标签的x)的内联列表组成。 与其他文章不同，我想从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:

您必须放入html标头或现有样式表中的css的第一部分如下所示：

/*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!

创建圆角边框效果和x悬停效果所需的图像是可在可下载的zip中找到的小gif文件。 可以在Mozilla，IE(我不得不添加0px hack)，Chrome和Safari上正常运行。 对于Opera，存在一些主要问题，我不知道为什么，列表元素中的图像似乎存在问题。 任何想法都欢迎！

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

我希望它是有用的！ 这是带有图像的完整资源：

Gmail style labels download

Gmail样式标签下载

翻译自: https://tympanus.net/codrops/2009/08/29/css-gmail-like-labels/

css标签中的标签样式