CSS Trick: Create tag icon with dynamic text width using Pure CSS
Hi Guys,
If you are searching for a tag icon which can be used to show few keywords on any page. Then this is the place where you can find a very simple trick to generate it with in few minutes. The icon created using this CSS trick has feature that it can take dynamic width based upon the text width. Below image is the example how it will rendered:
Click here for the Demo.
Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle.
I usually markup tags with unordered list. So the markup is fairly simple:
In the CSS part :before and :after pseudo elements will do the rest of the trick and style them to achieve the styling look like a tag.
I am placing the tags list at the bottom of the post element with adjusting ULs absolute position
Height (and line-height) of the list item LI. Also few margins and padding and some rounded corners on the right hand side.
To achieve the pointed edge we are adding a :before pseudo-element. The element has the width and height set to zero, that way we are only using it’s borders. To "draw" an arrow pointing left we are showing only the right border.
The last element to add is the :after pseudo-element. This will act as that rounded hole. What we’re doing here is creating an empty square, and we’re rounding it’s edges so we create a circle (and of course we position it with position: absolute).
That was a basic html and CSS code but if someone want to make this tag as clickable then It can easily be achieved by adding anchor tag inside the LI element. Also need to add some classes to handle the hover of achor tag.
I hope this blog is helpful for you.
Happy Designing
!!
If you are searching for a tag icon which can be used to show few keywords on any page. Then this is the place where you can find a very simple trick to generate it with in few minutes. The icon created using this CSS trick has feature that it can take dynamic width based upon the text width. Below image is the example how it will rendered:
Click here for the Demo.
Basics:
Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. For CSS triangles you need to manipulate borders of an element that has zero height and width. CSS circle is simpler. All you need is a square element with rounded corners set to at least half the size of the element. The border radius will then merge into a circle.
HTML
I usually markup tags with unordered list. So the markup is fairly simple:
<ul class="tags">
<li>CSS</li>
<li>HTML</li>
<li>Mohit</li>
<li>Vashishtha</li>
<li>SharePoint</li>
</ul>
In the CSS part :before and :after pseudo elements will do the rest of the trick and style them to achieve the styling look like a tag.
CSS
I am placing the tags list at the bottom of the post element with adjusting ULs absolute position
.tags{
margin:0;
padding:0;
position:absolute;
right:24px;
bottom:-12px;
list-style:none;
}Height (and line-height) of the list item LI. Also few margins and padding and some rounded corners on the right hand side.
.tags li{
float: left;
height: 24px;
line-height: 24px;
position: relative;
font-size: 11px;
margin: 2px 5px 2px 12px;
padding: 0 10px 0 12px;
background: #0078d7;
color: #fff;
text-decoration: none;
-moz-border-radius-bottomright: 4px;
-webkit-border-bottom-right-radius: 4px;
border-bottom-right-radius: 4px;
-moz-border-radius-topright: 4px;
-webkit-border-top-right-radius: 4px;
border-top-right-radius: 4px;
}To achieve the pointed edge we are adding a :before pseudo-element. The element has the width and height set to zero, that way we are only using it’s borders. To "draw" an arrow pointing left we are showing only the right border.
.tags li:before {
content: "";
float: left;
position: absolute;
top: 0;
left: -12px;
width: 0;
height: 0;
border-color: transparent #0078d7 transparent transparent;
border-style: solid;
border-width: 12px 12px 12px 0;
}
The last element to add is the :after pseudo-element. This will act as that rounded hole. What we’re doing here is creating an empty square, and we’re rounding it’s edges so we create a circle (and of course we position it with position: absolute).
.tags li:after {
content: "";
position: absolute;
top: 10px;
left: 0;
float: left;
width: 4px;
height: 4px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background: #fff;
-moz-box-shadow: -1px -1px 2px #004977;
-webkit-box-shadow: -1px -1px 2px #004977;
box-shadow: -1px -1px 2px #004977;
}That was a basic html and CSS code but if someone want to make this tag as clickable then It can easily be achieved by adding anchor tag inside the LI element. Also need to add some classes to handle the hover of achor tag.
I hope this blog is helpful for you.
Happy Designing
!!
Comments
Post a Comment