خمس انواع لتغير شكل الاقسام Label

عدد المشاهدات الان

اختر احد الاشكال والصوره الثالثه بعد الاضافه سو نفسه وبالبحث عن
]]></b:skin>
فوقه ضع الكود

.Label li:hover {
transform: rotate(5deg);
}
.Label li {
border: 1px solid;
border-radius: 6px 6px 6px 6px;
color: #FF0000 !important;
float: left;
font-size: 116%;
list-style: none outside none;
margin: 2px;
padding: 4px;
transition: all 0.3s ease 0s;
}
.Label a {
color: #FF0000;
text-decoration: none;
}

#Label1 li {
float: right;
background:#fafafa url(https://1.top4top.net/p_13594x3px1.gif)no-repeat scroll 121px 9px;
padding: 5px 25px 7px 9px;
font-size: 12px;
margin: 0 4px 10px 0;
display: inline-block;
border: 1px solid #d7d7d7;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
color:#aeaeae;
width:108px;
}
#Label1 li a{color:#000;}
#Label1 li:hover { background:#ffffff url(https://5.top4top.net/p_1359d0r6k2.jpg)no-repeat scroll 121px 9px;}

 /* CSS label S3 */
.cloud-label-widget-content{text-align:right}
.label-size{display:block;float:right;margin:0 5px 2px 2px;color:#fff;transition:all 0.4s ease-in-out;}
.cloud-label-widget-content {text-align: right;}
.label-size {display: block;float: right;margin:1px 5px 5px 4px;color: #fff;font-size: 11px;text-transform: uppercase;font-family:Electrolize,ge_ss_threeregular;}
.label-size:nth-child(1):hover,.label-size:nth-child(2):hover,.label-size:nth-child(3):hover,.label-size:nth-child(4):hover,.label-size:nth-child(5):hover,.label-size:nth-child(6):hover,.label-size:nth-child(7):hover,.label-size:nth-child(8):hover,.label-size:nth-child(9):hover,.label-size:nth-child(10):hover,.label-size:nth-child(11):hover,.label-size:nth-child(12):hover,.label-size:nth-child(13):hover,.label-size:nth-child(14):hover,.label-size:nth-child(15):hover,.label-size:nth-child(16):hover,.label-size:nth-child(17):hover,.label-size:nth-child(18):hover,.label-size:nth-child(19):hover,.label-size:nth-child(20):hover{background:#444}
.label-size:nth-child(1) {background: #FF4444;}.label-size:nth-child(2) { background: #33B5E5; }.label-size:nth-child(3) { background: #99CC00; }.label-size:nth-child(4) { background: #FF8800; }.label-size:nth-child(5) { background: #AAAAAA; }.label-size:nth-child(6) { background: #AC6AF4; }.label-size:nth-child(7) { background: #555; }.label-size:nth-child(8) { background: #f2a261; }.label-size:nth-child(9) { background: #F4BB55; }.label-size:nth-child(10) { background: #4571C0; }.label-size:nth-child(11) { background: #99cc33; }.label-size:nth-child(12) { background: #EC69DB; }.label-size:nth-child(13) { background: #40dece; }.label-size:nth-child(14) { background: #ff6347; }.label-size:nth-child(15) { background: #f0e68d; }.label-size:nth-child(16) { background: #7fffd2; }.label-size:nth-child(17) { background: #7a68ed; }.label-size:nth-child(18) { background: #ff1491; }.label-size:nth-child(19) { background: #698c23; }.label-size:nth-child(20) { background: #00ff00; }.label-size a, .label-size span { display: inline-block; color: #fff !important; padding: 4px 10px; font-weight: bold; }.label-count { white-space: nowrap; padding-left: 3px; margin-right: -3px; background: #444; color: #fff;}

/* CSS label */.label-size {display: inline-block;}.label-size {position:relative;text-transform:none;text-decoration:none;font-size:13px;font-family:cursive;color:#fff!important;}.label-size a {width: 130px; color: #233442; padding: 5px 5px; background: #F8F8F8; display: block; text-align: center; margin: 5px; border-bottom-color: #E6E6E6; border-bottom-style: dashed; border-bottom-width: 1px;}.label-size-1,.label-size-2,.label-size-3,.label-size-4,.label-size-5,.label-size-6{font-size:100%;}.label-size a:before {content: "\f02c";font-family: FontAwesome;font-style: normal;font-weight: normal;text-decoration: none;color: #fff;transition: .3s linear;float: right;background: #29567D; padding: 3px;}.label-size a:after { content: ''; position: absolute; top: 10px; right: 28px; border: 10px solid transparent; border-right-color: #29567D; }.label-size a:before:hover{color:#254E71}.label-size:hover{opacity:1;visibility:visible;}.label-size a:hover{color:#F74047;}

.sidebar .label-size {
position:relative;
text-transform: uppercase;
text-decoration:none;
font-size:13px;
font-family:Open Sans;
color:#fff!important;
}
.sidebar .label-size a {
color:#fff!important;
font-weight:bold;
padding:8px 10px;
margin:0 6px 6px 0;
float:left;
display:block;
-moz-transition: all 0.4s ;
-o-transition: all 0.4s;
-webkit-transition: all 0.4s ;
-ms-transition: all 0.4s ;
transition: all 0.4s ;
}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

وسلامتكم

اذا حبيت نسخ المقالهـ