css3标签设计

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

css3标签设计

设计了三种常用的文章标签,第一个是圆角效果比较简单,主要思路就是非等的对称的圆角;第二个主要应用了ribbon,使用:before生成;第三个就稍微麻烦点,三角加上一个小圆点,使用:before和:after生成,看来不错啊。

demodownload

主要css代码:

/* demo1 */
.demo1 .tag a{
    background-color:#93BD17;
	color:#fff;
	border-radius:8px 5px 8px 5px;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	transition:all 0.3s ease;
}
.demo1 .tag a:hover{
    border-radius:15px 6px 15px 6px;
}
/* demo2 */
.demo2{
    position:relative;
}
.demo2 .tag{
    position:absolute;
	left:-67px;
	top:10px;
}
.demo2 .tag a{
    background-color:#03AEC7;
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	position:relative;
	display:block;
	margin:0 0 10px;
	-webkit-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
	-moz-box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
	box-shadow:-5px 0 5px -5px rgba(0, 0, 0, 0.3) inset;
}
.demo2 .tag a:before{
    content:'';
	width:0;
	height:0;
	position:absolute;
	left:-10px;
	top:0;
	border-left:10px solid transparent;
	border-top:12px solid #03AEC7;
	border-bottom:12px solid #03AEC7;
}
/* demo3 */
.demo3 .tag a{
    background-color:#F89406;
	color:#fff;
	text-shadow:0 -1px 0 rgba(0,0,0,.2);
	position:relative;
}
.demo3 .tag a:before{
	content:'';
	width:0;
	height:0;
	position:absolute;
	left:-10px;
	top:0;
	border-right:10px solid #F89406;
	border-top:12px solid transparent;
	border-bottom:12px solid transparent;    
}
.demo3 .tag a:after{
    content:'';
	width:4px;
	height:4px;
	position:absolute;
	left:-4px;
	top:10px;
	background-color:#fff;
	border-radius:4px;
}

demodownload

Nike Tiempo Legend VI FG

如需转载,烦请注明出处:https://www.w3cplus.com/demo/384.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部