I am going to share tags design using pure CSS3. This is used to highlight your blog tags.

Blog Tags are used to highlight keywords or search words in a blog or site content. These tags have been designed with pure CSS3 and additional fallback for older browsers.

CSS3 Tags

CSS3 Tags

CSS3 Code

a {
text-decoration:none;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
}
.tag-body {
cursor:pointer !important;
}
a.tag-body:active {
top:1px
}
.tag-body, a.tag-body {
display:inline-block;
position:relative;
font-size:12px;
height:15px;
padding:2px 8px 8px 15px;
margin:auto auto 9px 15px;
border-width:1px 1px 1px 0;
border-style:solid;
-moz-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-ms-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-o-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-khtml-box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow:1px 1px 0 rgba(0, 0, 0, 0.15), -1px 1px 1px rgba(255, 255, 255, 0.5) inset;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-ms-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
line-height:1.8
}
.tag:after {
position:absolute;
background:none repeat scroll 0 0 whitesmoke;
border:1px solid #FFF;
-moz-border-radius:25px;
-webkit-border-radius:25px;
-ms-border-radius:25px;
-o-border-radius:25px;
border-radius:25px;
-moz-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-webkit-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-ms-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
-o-box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
box-shadow:-1px -1px 3px #FFF inset, 0 1px 1px rgba(0, 0, 0, 0.3) inset;
content:"";
height:5px;
left:0;
top:8px;
width:5px;
z-index:0;
background-clip:padding-box;
-webkit-background-clip:padding-box
}
.tag:before {
background:inherit;
-moz-transform:rotate(45deg) translate(-8px, 5px);
-webkit-transform:rotate(45deg) translate(-8px, 5px);
-ms-transform:rotate(45deg) translate(-8px, 5px);
-o-transform:rotate(45deg) translate(-8px, 5px);
transform:rotate(45deg) translate(-8px, 5px);
border-style:solid;
border-width:0 0 1px 1px;
-moz-border-radius:3px 4px 3px 6px;
-webkit-border-radius:3px 4px 3px 6px;
-ms-border-radius:3px 4px 3px 6px;
-o-border-radius:3px 4px 3px 6px;
border-radius:3px 4px 3px 6px;
height:79%;
content:"";
left:2px;
top:18%;
position:absolute;
width:19px;
-moz-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-webkit-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-ms-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
-o-box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
box-shadow:1px -1px 1px rgba(255, 255, 255, 0.5) inset;
z-index:0
}
.tag {
bottom:0;
height:100%;
right:-1px;
width:101%;
z-index:0;
background:none !important
}
.tag-body.yellow {
border-color:#FFA71D;
color:#202020;
text-shadow:0 1px #F0E9A1 !important;
background:#feb645;
background:-moz-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645));
background:-webkit-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-o-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:-ms-linear-gradient(top, #f1e767 0%, #feb645 100%);
background:linear-gradient(top, #f1e767 0%, #feb645 100%)
}
.yellow .tag:before {
border-color:#FFA71D;
background:#feb645;
background:-moz-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-webkit-gradient(linear, left top, right bottom, color-stop(0%, #f1e767), color-stop(100%, #feb645));
background:-webkit-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-o-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:-ms-linear-gradient(-45deg, #f1e767 0%, #feb645 100%);
background:linear-gradient(-45deg, #f1e767 0%, #feb645 100%)
}
.firefox16 .yellow .tag:before {
background:linear-gradient(125deg, #f1e767 0%, #feb645 100%)
}
a.yellow {
color:#6F4503 !important
}
a.yellow:hover {
color:#000 !important
}
a.tag-body:hover {
-moz-box-shadow:1px 1px 0 #C0C0C0;
-webkit-box-shadow:1px 1px 0 #C0C0C0;
-ms-box-shadow:1px 1px 0 #C0C0C0;
-o-box-shadow:1px 1px 0 #C0C0C0;
box-shadow:1px 1px 0 #C0C0C0
}
.tag {
bottom:0;
height:100%;
right:-1px;
width:101%;
z-index:0;
background:none !important
}

Html Usuage

<a class="tag-body yellow" href="http://w3lessons.info/tag/tips-tricks/"><span class="tag">Tips & Tricks</span></a>

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download Now

If you enjoyed this article, Get email updates (It’s Free)
CSS3 Tags, Blog Tags Design, Tag Design using CSS3http://w3lessons.info/wp-content/uploads/2012/11/css3-tags1.pnghttp://w3lessons.info/wp-content/uploads/2012/11/css3-tags1-150x150.pngKarthikeyan KCSS3FreebiesWeb DesignCSS3,tips & tricks
I am going to share tags design using pure CSS3. This is used to highlight your blog tags.Blog Tags are used to highlight keywords or search words in a blog or site content. These tags have been designed with pure CSS3 and additional fallback for older browsers.CSS3 CodeHtml UsuagePlease...