Create Simple CSS3 Tags 3D

3D tags, today we are going to create CSS3 Tag 3D. As an experiment tags link is good for SEO keyword, in this article we’ll create the tags using box-shadow, text-shadow and radius, which will add on of each tag.  We’ve covered 100 tutorial CSS3 before on Freshdesignweb, but on this occasion we’ll show an alternative method of creating tags that you can easy add in your wordpress website.


Demo  download

For the purpose of this tutorial we’ll create a 3D box on our tags. You will most likely need something similar should you use these in, for example, a blog sidebar.

Let’s go with my tutorial coding bellow:

The Markup Language

The Cascading Style Sheets (CSS) Tags will have the following code:

 a, a:hover,a:focus{color:#59b329;text-decoration:none;outline:none}
	.tag,.tabs-link{padding-bottom:3px;-webkit-box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 -2px rgba(255,255,255,0.1),inset 0 -3px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05)}
    .tag,.tabs-link{display:inline-block;vertical-align:top;line-height:2em;padding-top:0;font-weight:bold;color:#505050;text-align:center;text-shadow:0 1px rgba(255,255,255,0.5);background:#eaefef;border:0px white;border-radius:2px;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
	.tag:hover,.tabs-link:hover{color:white;background:#20aae5;text-decoration:none;text-shadow:0 1px rgba(0,0,0,0.15);outline:none}
	.tag:active,.tabs-link:active{padding-bottom:2px;border-top:1px solid white;-webkit-box-shadow:inset 0 -2px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05);box-shadow:inset 0 -2px rgba(0,0,0,0.1),0 1px rgba(0,0,0,0.05)}
    .tags-list>li{float:left;margin:0 .8em .8em 0}

Now! We have a beautiful CSS3 tags with 3D style. Check out the demo below, and feel free to download this example for future use. I hope you enjoyed this tutorial and find it useful!


Graham Bill's expertise in web design and his specialization in WordPress sites and blogs. With over a decade of experience, he likely possesses a deep understanding of the web design industry and the latest trends in WordPress development. Graham's blog, filled with helpful tips and tricks, is a valuable resource for those interested in improving their web design skills or optimizing their WordPress sites and blogs. Sharing his expertise through informative articles likely showcases his commitment to providing value to the web design community.