Beautiful Tags For a Website Using Only CSS

Beautiful Tags For a Website Using Only CSS

Great web designer Orman Clark once shared with his readers very beautiful tag cloud design, which may help to make you website more attractive.

Such a tag can be marked up with just one image, however, modern technologies allow to mark it up entirely with CSS, without using this image. And now I will show you how to do it.

It should be noted that the result will look excellent in the following browsers: Google Chrome, Firefox, Safari and Opera. Tag will be without a gradient in Internet Explorer 9, but here it also looks not bad. But in IE8 and below it looks unseemly.

HTML code for a tag is a simple link:

<div class="tags">
	<a href="#">tag1</a>
	<a href="#">tag2</a>
	<a href="#">tag3</a>

Firstly we declare the link as inline block, remove underline and prevent text from wrapping in a new line.

Now we will begin to “draw” the right side of the rectangle. We specify a gradient background, a border colors, add the effects of external and internal shadow for the block and shadow to text, as well as padding and margin (margin of 10px to the right specified in order to leave space for the adjacent tag triangle):

.tags a {
	display: inline-block;
	height: 21px;
	margin: 0 10px 0 0;
	padding: 0 7px 0 14px;
	white-space: nowrap;
	position: relative;

	background: -moz-linear-gradient(top, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(top, #fed970 0%,#febc4a 100%);
	background: linear-gradient(to bottom, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	color: #963;
	font: bold 11px/21px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);

	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);

We get the following:

Beautiful Tag

Now we will create the left triangle using the :before pseudo selector. Originally it’s a square (with the same borders, shadows and gradient, but rotated by 45 degrees), which will be transformed into a triangle:

a:before {
	content: '';
	position: absolute;
	top: 5px;
	left: -6px;
	width: 10px;
	height: 10px;

	background: -moz-linear-gradient(45deg, #fed970 0%, #febc4a 100%);
	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(-45deg, #fed970 0%,#febc4a 100%);
	background: -o-linear-gradient(45deg, #fed970 0%,#febc4a 100%);
	background: linear-gradient(135deg, #fed970 0%,#febc4a 100%);
	background-color: #FEC95B;

	border-left: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-radius: 0 0 0 2px;
	box-shadow: inset 1px 0 #FEDB7C, 0 2px 2px -2px rgba(0,0,0,0.33);

And it looks like this:

Beautiful Tag

It is worth noting that the webkit draws gradients in the opposite direction, so a negative value is specified for it: -45deg. Also, you may notice that there is not 45 but 135 degrees is specified in the prefix-free gradient property. I do not know why, but it should be such to display properly.

To make a triangle from a square, we use the transform property with the value rotate(45deg). But this is not enough – we also need to make it with an obtuse angle. This is achieved by scaling the Y-axis using the scale value for the transform property:

a:before {
	-webkit-transform: scale(1, 1.5) rotate(45deg);
	-moz-transform: scale(1, 1.5) rotate(45deg);
	-ms-transform: scale(1, 1.5) rotate(45deg);
	transform: scale(1, 1.5) rotate(45deg);

We get almost complete design of a tag:

Beautiful Tag

The last remaining thing – make a hole in our tag. The :after pseudo selector will help with this. Simply we create a small square and round off his corners so that it turns into a circle. And add a shadow to make it look three-dimensional:

a:after {
	content: '';
	position: absolute;
	top: 7px;
	left: 1px;
	width: 5px;
	height: 5px;
	background: #FFF;
	border-radius: 4px;
	border: 1px solid #DCA03B;
	box-shadow: 0 1px 0 rgba(255,255,255,0.2), inset 0 1px 1px rgba(0,0,0,0.21);

Hooray! In the end, we got identical tag design, as is shown in the first picture to this post:

Beautiful Tag Using Only CSS

Finally, you can add an effect to change the text on mouseover:

.tags a:hover {
	color: #FFF;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);

Live demo is here.

Cоmmеnts (1):
  1. 1
    Jiri Melcak said:

    Beware of degrees in :before element for gradient. I think everywhere it should be 135 deg a not one time 45deg, then -45deg, and elsewhere 135 deg.

Lеаvе а Соmmеnt

© 2009–2022  •  Privacy Policy