CSS3 Tags Design

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 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

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

View Demo Download Now