字号: - o +

CSS Gmail的风格标签

2013-03-01 前端开发 1人评论 12,443次浏览   

子曰:天生我才必有用,千金散尽还复来 o(∩_∩)o
WopusIDC优惠码:W3Cshare, 点击获取, 或者提交订单时手动输入

有没有想过如何产生一些很酷的Gmail标签在CSS?下面是一个模仿小标签在Gmail中使用。三张无色的小图像来创建圆角边框和悬停效果为x(删除标记)。

自己的类中定义的每一个li元素的颜色,所以它是很容易适应这些微小的小家伙,你自己的需要。下面是一些例子:

labels

点此查看效果

html结构是由其span行内元素和一个a标签(用于除去标签的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>

第一部分的CSS,你必须把你的HTML的标题或到您现有的样式表如下所示:

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  /*\**/: 0px\9; /*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 ;
}

为了给标签添加颜色,我们需要定义一些新的类:

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 ;
}

这使得它很容易改变的外观标签。

点此查看效果

本文作者:两千年的孤寂

2014年的目标:1、入手kp2,多看几本书。2、至少旅游一次。3、带公司走上正轨。少说话,多做事!我不是最好的,但我要做最努力的...... 本站主题交流群:465295619,不闲聊!以后你会知道它的重要性!你懂的~

继续查看有关 的文章

本文密切相关的文章

网友评论1

  1. 感觉国人不太喜欢这种风格

    游手好弦03-01 11:34 回复

发表我的评论

*

*

取消