Home » Labs » How to make attractive tags cloud with only CSS  

How to make attractive tags cloud with only CSS
Filed under Labs

Making a Tag Cloud based upon Cascading Style Sheets (CSS) is very simple, here is an example of tag cloud. Its only an outline and you need to modify it according to your needs. For example change colors, padding and margins etc to match with project layout. You can also see a working demo of this example at bottom.

CSS

 
 
.tag {
	float:left;
}
.tag ul {
	list-style-type: none;
}
.tag ul li {
	float: left;
	text-decoration: none;
	font: bold 12px/21px Arial, Tahoma, sans-serif;
	text-decoration: none;
	text-shadow: 0 1px rgba(255,255,255,0.4);
}
.style1{
	padding: 7px 21px;
	margin:5px 10px;
	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;
	border-top: 1px solid #EDB14A;
	border-bottom: 1px solid #CE922E;
	border-right: 1px solid #DCA03B;
	border-left: 1px solid #DCA03B;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #FEE395, 0 1px 2px rgba(0,0,0,0.21);
	color: #555;
}
.style2{
	padding: 7px 21px;
	margin:5px 10px;
	background: -moz-linear-gradient(top, #fb9d52 0%, #ed7228 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fb9d52 0%,#ed7228 100%);
	background: -o-linear-gradient(top, #fb9d52 0%,#ed7228 100%);
	background: linear-gradient(to bottom, #fb9d52 0%,#ed7228 100%);
	background-color: #ff9a4a;
	border-top: 1px solid #ff9a4a;
	border-bottom: 1px solid #ff9a4a;
	border-right: 1px solid #ff9a4a;
	border-left: 1px solid #ff9a4a;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #ed7228, 0 1px 2px rgba(0,0,0,0.21);
	color: #eee;
}
.style3{
	padding: 7px 21px;
	margin:5px 10px;
	background: -moz-linear-gradient(top, #fef052 0%, #fed852 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed970), color-stop(100%,#febc4a));
	background: -webkit-linear-gradient(top, #fef052 0%,#fed852 100%);
	background: -o-linear-gradient(top, #fef052 0%,#fed852 100%);
	background: linear-gradient(to bottom, #fef052 0%,#fed852 100%);
	background-color: #fcca1b;
	border-top: 1px solid #f8c811;
	border-bottom: 1px solid #fcca1b;
	border-right: 1px solid #fcca1b;
	border-left: 1px solid #fcca1b;
	border-radius: 1px 3px 3px 1px;
	box-shadow: inset 0 1px #fde72a, 0 1px 2px rgba(0,0,0,0.21);
	color: #222;
}
.tag ul li:hover {
	color: #fff;
	cursor:pointer;
	text-shadow: -1px -1px 0 rgba(153,102,51,0.3);
}

HTML

 
	<div class="tag">
	<ul>
		<li class="style1">Web Design</li>
		<li class="style2">Photoshop</li>
		<li class="style1">Adobe Reader</li>
		<li class="style2">WordPress</li>
		<li class="style1">Ajax</li>
		<li class="style2">jQuery</li>
		<li class="style1">Internet</li>
	</ul>		
	</div>

Live Demo

Tags:

Posts you may like: