Style Tags dengan CSS3
Publish Date : 21-02-2017 , dibaca 2109 kali, Hari ini dibaca : 1 kali ,0 comments
Berikut ini merupakan Style pada Tags website yang bisa anda modif dan kreasikan lagi :
CSS CODE :
<style type="text/css">
body {
background: #fff;
margin: 0;
padding: 0;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
font-size: 13px;
line-height: 1.6;
color: #333
}
p {
margin: 0 0 20px 0;
}
h2 {
color: #222;
font-size: 18px;
font-weight: normal;
margin: 10px 0;
}
.demo {
max-width: 360px;
margin: 20px auto;
}
/* Css3 tags */
.tags a {
display: inline-block;
height:24px;
line-height:23px;
position:relative;
margin: 0 12px 8px 0;
padding: 0 12px 0 10px;
background: #777;
-moz-border-radius-bottomleft: 5px;
-webkit-border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
border-top-left-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
color: #fff;
font-size:12px;
font-family: "Lucida Grande","Lucida Sans Unicode",Verdana,sans-serif;
text-decoration: none;
text-shadow: 0 1px 2px rgba(0,0,0,0.2);
font-weight: bold;
}
.tags a:before {
content: "";
position: absolute;
top: 10px;
right: 1px;
float: left;
width: 5px;
height: 5px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
-moz-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
}
.tags a:after {
content: "";
position: absolute;
top:0;
right: -12px;
width: 0;
height: 0;
border-color: transparent transparent transparent #777;
border-style: solid;
border-width: 12px 0 12px 12px;
}
.tags a.color1 {background: #f58220;}
.tags a.color1:after {border-color: transparent transparent transparent #f58220}
.tags a.color2 {background: #97c224;}
.tags a.color2:after {border-color: transparent transparent transparent #97c224}
.tags a.color3 {background: #de3f3e;}
.tags a.color3:after {border-color: transparent transparent transparent #de3f3e}
.tags a.color4 {background: #ec008c;}
.tags a.color4:after {border-color: transparent transparent transparent #ec008c}
.tags a.color5 {background: #00a6df;}
.tags a.color5:after {border-color: transparent transparent transparent #00a6df}
.tags a:hover {background:#222 !important}
.tags a:hover:after {border-color:transparent transparent transparent #222!important}
.small a {
height: 21px;
line-height: 21px;
float: none;
font-size: 11px;
}
.small a:before {
right: 0;
top: 8px;
border-width: 10px 0 10px 10px;
}
.small a:after {
right: -11px;
top: 0;
border-width: 11px 0 11px 11px;
}
</style>
HTML CODE :
<div class="demo">
<h2>CSS3 Tags</h2>
<div class="tags">
<p>
<a title="" href="" class="color5">Fashion</a>
<a title="" href="" class="color2">My Movies</a>
<a title="" href="" class="color1">Music</a>
<a title="" href="" class="color5">Sport</a>
<a title="" href="" class="color3">Art</a>
<a title="" href="" class="color4">Food</a>
<a title="" href="" class="color5">Travels</a>
<a title="" href="" class="color1">Life Style</a>
<a title="" href="" class="color3">Cars</a>
<a title="" href="" class="color4">Nature</a>
<a title="" href="" class="color2">Web</a>
</p>
</div>
<div class="tags small">
<p>
<a title="" href="" class="color5">Fashion</a>
<a title="" href="" class="color2">My Movies</a>
<a title="" href="" class="color1">Music</a>
<a title="" href="" class="color5">Sport</a>
<a title="" href="" class="color3">Art</a>
<a title="" href="" class="color4">Food</a>
<a title="" href="" class="color5">Travels</a>
<a title="" href="" class="color1">Life Style</a>
<a title="" href="" class="color3">Cars</a>
<a title="" href="" class="color4">Nature</a>
<a title="" href="" class="color2">Web</a>
</p>
</div>
</div>