Ads Nhà Tài Trợ
Nam Trung JSC Thớt Gỗ, Ván Ghép Các Loại

Tổng hợp tùy chỉnh nhãn đám mây bằng CSS

* Mẫu 1 chép đoạn code này chèn sau thẻ <head>
<style>
.label-size{     
display: inline-block;     
padding: 0px 10px;     
height: 29px;     
line-height:29px;     
border-radius: 5px;     
font-weight:bold;     
font-size:12px;     
text-decoration:none;  
}    
.label-size{    
border: 1px solid #769e42;    
box-shadow: inset 0 1px 0 #c5e59c ;    
background-color: #9ed35a;    
text-shadow: 0px 1px 1px #6ea23b;    
color: #fff;    
background-image: linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(bottom, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  
}    
.label-size:hover{    
background-color: #b7fa66;    
background-image: linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -o-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -moz-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -webkit-linear-gradient(top, #b7fa66 0%, #7ec940 100%);    
background-image: -ms-linear-gradient(top, #b7fa66 0%, #7ec940 100%);  }    
.label-size:active{    
background-image: linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(top, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  
}    
.label-size{    
display:inline-block;    
border-radius: 5px 0 0 5px;    
border-right-width:0;    
position:relative;    
z-index:5;    
margin-right: 20px;    
margin-bottom: 10px;  
}    
.label-size:after{    
content: " ";    
width: 22px;    
height: 22px;    
line-height: 18px;    
font-size:25px;    
border-top: 1px solid #769e42;    
border-right: 1px solid #769e42;    
box-shadow: inset 0 1px 0 #c5e59c ;    
background-color: #9ed35a;    
text-shadow: 0px 1px 1px #7eac46;    
border-radius: 3px 7px 3px 0;    
color: #fff;    
background-image: linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(135deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    position:absolute;    top: 3px;    right: -12px;    z-index:-3;    -webkit-transform: rotate(45deg);  /* Saf3.1+, Chrome */         -moz-transform: rotate(45deg);  /* FF3.5+ */          -ms-transform: rotate(45deg);  /* IE9 */           -o-transform: rotate(45deg);  /* Opera 10.5 */              transform: rotate(45deg);                 filter: progid:DXImageTransform.Microsoft.Matrix(/* IE6–IE9 */                         M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476, sizingMethod='auto expand');                   zoom: 1;  }    
.label-size:hover:after{    
background-color: #b7fa66;    
background-image: linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -o-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -moz-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    
background-image: -webkit-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);    background-image: -ms-linear-gradient(-45deg, #b7fa66 0%, #7ec940 100%);  }    
.label-size:active:after{    
background-image: linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -o-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -moz-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -webkit-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);    background-image: -ms-linear-gradient(-45deg, rgb(125,196,64) 0%, rgb(157,210,88) 100%);  }    .label-size:before{    
content: " ";    
height:5px;    
width:5px;    
display:block;    
position:absolute;    
right:-3px;    
top:11px;    
background-color: #fcfdf5;    
border: 1px solid #83ab52;    
border-radius:5px;    
box-shadow: 0 1px 0 #b2ddd83;  
}    
.label-size span{    
padding:2px 5px;    
border: 1px solid #9e5c26;    
border-radius: 5px;    
box-shadow: inset 0 1px 0 #f5bf8c;    
background-color: #ed943f;    
text-shadow: 0px 1px 1px #000;    
margin-left: 10px;    
background-image: linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -o-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -moz-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -webkit-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);    background-image: -ms-linear-gradient(bottom, rgb(211,95,32) 0%, rgb(223,131,45) 100%);  }    
#Label1 {height:210px !important;}
</style>
* Chú ý dòng cuối
#Label1 {<strong>height:210px</strong> !important;}
* Số 210 là chiều cao của nhãn bạn tùy chỉnh lại cho phù hợp

* Mẫu 2 chép đoạn code này chèn sau thẻ <head> 

<style>
.widget li, .BlogArchive #ArchiveList ul.flat li{ list-style: none;
padding: .25em 0;
margin: 0;
text-indent: 0;}
.label-size {
float: left;
font-size: 13px;
}
.list-label-widget-content ul,
.list-label-widget-content li {
list-style: none outide none;
}
.list-label-widget-content li a {
background: #F3F3F3;
color: #525252;
border: 1px solid #E2E2E2;
border-radius: 3px;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 153px;
}
.list-label-widget-content li span {
color: orangered;
background: #F3F3F3;
border-radius: 3px;
min-width: 40px;
float: right;
padding: 6px;
margin-bottom: 5px;
text-align: center;
border: 1px solid #E2E2E2;
}
.list-label-widget-content li span:first-child {
background: #F3F3F3;
border: 1px solid #E2E2E2;
border-radius: 3px;
border-right: 10px solid;
border-left: 10px solid;
width: 113px !important;
float: left;
padding: 5px;
margin-bottom: 5px;
line-height: 16px;
width: 250px;
}
.list-label-widget-content li a:hover,
#footer-nav .list-label-widget-content li a:hover {
background: orangered;
color: #fff;
}
.cloud-label-widget-content .label-size {
font-size: 100%;
float: left;
}
.cloud-label-widget-content .label-size a {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.label-size a:hover, .label-size:hover .label-count, .label-size:hover a {
background-color: #FD4326;
color: #FFF;
text-decoration: none;
transition: all 0.2s ease-out 0s;
}
.cloud-label-widget-content .label-size span {
color: #666;
float: left;
font-size: 12px;
margin: 0px 5px 5px 0px;
padding: 5px;
text-decoration: none;
border: 1px solid #E2E2E2;
border-radius: 3px;
}
.cloud-label-widget-content .label-size span:first-child,
.cloud-label-widget-content .label-size span:first-child span:nth-child(2) {
background: #FD4326;
color: #FFF;
}
</style>
Tags

Đăng nhận xét

0 Nhận xét
* Please Don't Spam Here. All the Comments are Reviewed by Admin.
Sở hữu một thiết kế thanh lịch và vô cùng đẳng cấp, mang trong mình một hiệu năng "cực khủng", chụp ảnh, quay phim chất lượng hàng đầu nhờ cụm 3 camera 50 MP. Thiết bị hoàn hảo dành cho dân làm việc văn phòng theo mô hình Workcation thích du lịch khám phá, làm Việc Từ Xa,... Thiết bị công nghệ số cực ngon dành cho TELEWORK, WFH, người làm nghề MMO, KOC / Streamer,...

Xem Giá Bán

Laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất. Thiết kế lai giữa laptop gaming và máy tính bảng sáng tạo, sang chảnh, trang bị công nghệ tân tiến nhất, chinh phục mọi giới hạn cùng với cấu hình vượt trội.

Xem Giá Bán