How To Create a Stylish Keyword Tag in pure HTML/CSS
9th Apr 2014 | Posted by Eko S. | No CommentsTag or specifically the keyword tags are used in your WordPress website to assist visitors in finding relevant article that based their need. Tag is like index in a book and more specific than category. They are incredibly common on a website, but a simple text isn’t enough. Why you don’t make your post tags more stylish and interesting for visitors?
In this tutorial you’ll learn a step by step to make a stylish tag in HTML/CSS based our Free Dark Velvet UI Kit, you can download all web ui elements here for free!
Here the final result of our stylish post tag:
Step 1: Preparation
The first step that you should do is setting up the folder structure.
You can ignore the images folder since it’s optional.
Step 2: The HTML Structure
Save the HTML script below in file index.html:
<!DOCTYPE html> <html> <head> <title>Tags HTML CSS</title> <link rel='stylesheet' type='text/css' href='/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/styles2.css' /> </head> <body> <div class="container"> <div id="tagWrapper"> <ul class="tags"> <li class="tag-body"><a href='#'>Fashion Culture</a></li> </ul> </div> </div> </body> </html>
Here our first look of index.html:
Step 3: The Basic CSS Style
You’ll create the page background first, then make the container that will appear in the center page. Save this script below on style.css file:
body{ background: #2c3941; font-size: 16px; } .container{ height: auto; max-height: 300px; width: auto; max-width: 25%; bottom: 0; left: 0; margin: auto; position: absolute; right: 0; top:0; padding: 25px !important; } li.tag-body a{ text-decoration: none; color: #dcdcdc; text-shadow: 1px 2px 0px rgba(30, 30, 30, 0.3); }
Here the result after we add style.css:
The next is, make it more presentable. To be more easily, we’ll divide it into 3 section: tag-body, tag-arrow, dan tag-hole.
Step 4: Add Style on Tag-Body
We’ll adding style for tag-body by add this script below inside our style.css file:
li.tag-body{ font-family: "Cabin SemiBold", verdana, serif; font-size: 13px; display: inline-block; color: #fff; position: relative; padding: 8px 10px 8px 15px; margin: 0 25px 20px 0; text-decoration: none; border-top: 1px solid rgba(255,255,255, 0.2); border-top-right-radius: 3px; border-bottom-right-radius: 3px; background-color: rgba(86,96,103,0.9); }
Here the result:
The next is adding gradient effect, still on the same class: li.tag-body please add this script:
/*Cross browser gradient*/ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(186,96,103,0.7)), to(rgba(64,72,80,0.7))); background-image: -webkit-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: -moz-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: -o-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png);
The result will be like this:
Then to make it more interesting we’ll add the shadow effect by adding this script:
/*shadow*/ -webkit-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7); -moz-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7); box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7);
Check the result below:
Step 5: Adding Tag-Arrow Style
To create tag-arrow, there are several methods. Not a few are using triangle methods and there are triangle generator tool that will help you. But in this tutorial we’ll start by creating a square box then rotate it 45 degrees.
The benefit of this method then triangle are, we can add background, gradient and border. The following is the description of the process:
Okay, let’s continue. First we’ll make a shape at once setting up the z-index: -1 so the tag-arrow will appear behind the tag-body.
/*Arrow left*/ li.tag-body:before { display: inline-block; height: 22px; width: 22px; position: absolute; left: -12px; top: 4px; content: ""; background-color: rgba(86,96,103,0.9); z-index: -1; }
See the result below:
Then use transform to rotate 45 degrees, still in the same class: li.tag-body: before please add the css script below:
/*transform shape*/ -webkit-transform:scaleX(.6) rotate(45deg); -moz-transform:scaleX(.6) rotate(45deg); -o-transform:scaleX(.6) rotate(45deg); transform:scaleX(.6) rotate(45deg);
Here the result:
Looks neat yet? We’ll make it better. But before that, please take a look our “transform shape” script above. As you can see, we use scaleX() function. This function will make the shape of a rhombus not square. The following is a comparison between use and without use of scaleX().
Back to make our tag more better. As well as on tag-body, we also add background and box-shadow to the border. Please add the css code below:
/*Gradient*/ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(86,96,103,0.7)), to(rgba(64,72,80,0.7))); background-image: -webkit-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: -moz-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: -o-linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)); background-image: linear-gradient(rgba(86,96,103,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png); /*Shadow*/ -webkit-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7); -moz-box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7); box-shadow: 1px 2px 1px -1px rgba(30, 30, 30, 0.7); */ /*Border*/ border-left: 1px solid rgba(255,255,255, 0.2); border-bottom: 1px solid transparent;
Here, the result:
Step 6: Adding style on Tag-Hole
The next step that very important too is the tag-hole, to give the hole effect:
/*Create hole*/ li.tag-body:after { content:''; width:8px; height:8px; background:#2f3b44; border-radius:20px; position:absolute; top:12px; left:-4px; z-index:9999; }
See the result:
Next, still in the same class li.tag-body:after please add the css code below:
/*Create hole effect*/ -webkit-box-shadow: inset -1px 2px 2px -1px rgba(30, 30, 30, 1); -moz-box-shadow: inset -1px 2px 2px -1px rgba(30, 30, 30, 1); box-shadow: inset -1px 2px 2px -1px rgba(30, 30, 30, 1); border-bottom: 1px solid rgba(225,225,225,0.4);
The result as the image below:
Step 7: Make the hover style
As the final steps in this tutorial, we’ll add the hover effect on our tag. We will decrease the opacity value on the gradient.
/*Hover Effect*/ li.tag-body:hover, li.tag-body:hover:before{ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(118,123,127,0.7)), to(rgba(64,72,80,0.7))); background-image: -webkit-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7)); background-image: -moz-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7)); background-image: -o-linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7)); background-image: linear-gradient(rgba(118,123,127,0.7), rgba(64,72,80,0.7)), url(/articles_and_tutorials/how_to_create_stylish_keyword_tag_html_css/images/bg_1.png); }
Like this:
Then to clarify the hover effect, please add some li inside our index.html file. Like this:
<div class="container"> <div id="tagWrapper"> <ul class="tags"> <li class="tag-body"><a href='#'>Design</a></li>--> <li class="tag-body"><a href='#'>Fashion Culture</a></li> <li class="tag-body"><a href='#'>Electricity</a></li> <li class="tag-body"><a href='#'>Kitchen</a></li> <li class="tag-body"><a href='#'>Cinema</a></li> <li class="tag-body"><a href='#'>Anniversaries</a></li> </ul> </div> </div>
Here the result:
Conclusion
You just finished the tutorial on how to make more stylish post tag in pure html/css. Hope you found this tutorial is useful. And if you have any questions, please use the comment below. Enjoy!
- Written by Mukhlasin