Create Simple CSS3 Tags 3D

by grahambill, Tutorials, CSS3

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.

css3-tags-3d

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 HTML structure will have the following code:

				<div class="tags" id="tags">
  <ul class="tags-list">
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">3D</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Alert</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">App</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Autocomplete</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Badge</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Blockquote</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Button</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Calendar</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Chart</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Checkbox</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Checkout</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Clock</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Colors</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Counter</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">CSS3 Transforms</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">CSS3 Transitions</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Date Picker</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Dropdown</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Facebook</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Form</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Glossy</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Graph</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Growl</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Header</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Icons</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">iOS</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">List</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Loading</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Login</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Menu</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Metal</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Modal</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Navigation</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Newsletter</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Notepad</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Notepaper</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Notification</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">OS X</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Pagination</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Popover</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Pricing</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Progress Bar</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Push</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Radio</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Search</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Select</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Share</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Social</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Switch</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Table</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Tabs</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Tag</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Tag Cloud</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Toggle</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Tooltip</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Top Bar</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Widget</a></li>
    <li><a href="https://freshdesignweb.com/css3-tags-3d/" class="tag">Window</a></li>
  </ul>
</div>
</div>

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

 a, a:hover,a:focus{color:#59b329;text-decoration:none;outline:none}
     ul,ol,li{display:block;margin:0;padding:0}ol,ul{list-style: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-heading{height:2em;line-height:2em;margin-bottom:1em}
    .tags-heading>h4{margin:0;line-height:inherit}
    .tags-toggle{display:none;text-align:center;font-weight:bold}
    .tags-toggle:before{content:"\e010";margin-right:.5em}
    .tags-list{overflow:hidden;line-height:1.5em}
    .tags-list>li{float:left;margin:0 .8em .8em 0}
    .tag{display:block;padding-left:.6em;padding-right:.6em;line-height:inherit;font-size:.9375em;font-weight:normal;color:#778187;background:#f2f2f3}

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!

demo | [download id=”34970″]

 

Related

40+ Free Responsive Navigation Menu Plugins & Tutorials

20+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

30+ Free HTML5 jQuery Upload File Scripts Example

50+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

Written by

Feedback Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *