How to Create a Tag Cloud with CSS ?
A tag cloud, also called a word cloud, is a graphic representation of text data that is commonly used to show free-form text or keyword metadata on web pages. Typically, tags consist of a single word, and the font size or color indicates the importance of each tag.
Approach
- In this approach, The HTML structure features a container styled with CSS to center its contents both horizontally and vertically on the page, providing a clean and organized layout.
- Each tag is styled using CSS properties like padding, border, border-radius, and background color, ensuring a consistent visual appearance across all tags.
Example: The example below shows how to create a tag cloud with CSS.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tag cloud</title>
</head>
<body style="display: flex; j
ustify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #f5f5f5;">
<div style="text-align: center;">
<h3>Create a tag cloud with CSS</h3>
<div class="tag-cloud">
<span class="tag">HTML</span>
<span class="tag">CSS</span>
<span class="tag">JavaScript</span>
<span class="tag">Python</span>
</div>
</div>
<style>
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
border-radius: 10px;
background: #fff;
box-shadow: 0px 10px 30px -5px
rgba(0, 0, 0, 0.1);
margin-top: 20px;
}
.tag {
font-size: 16px;
padding: 5px 10px;
background-color: #7ceb80;
border-radius: 5px;
color: #333;
transition: transform 0.3s,
background-color 0.3s,
box-shadow 0.3s;
cursor: pointer;
box-shadow: 0px 2px 5px -2px
rgba(0, 0, 0, 0.1);
}
.tag:hover {
transform: scale(1.2);
box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, 0.2);
background-color: green;
color: white;
}
</style>
</body>
</html>
Output:
Output
Example 2: The example below shows how to create a tag cloud with CSS.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tag Cloud</title>
<style>
.tag-cloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 20px;
border-radius: 10px;
margin-top: 20px;
}
.tag {
padding: 5px 10px;
transition: transform 0.3s,
background-color 0.3s,
box-shadow 0.3s;
cursor: pointer;
}
.tag1:hover {
transform: scale(1.2);
color: rgb(102, 142, 24);
}
.tag1 {
font-size: 23px;
}
.tag2 {
padding-top: 10px;
}
</style>
</head>
<body>
<div>
<h3>Create a tag cloud with CSS</h3>
<div class="tag-cloud">
<span class="tag tag1">HTML</span>
<span class="tag tag2">stands for</span>
<span class="tag tag1">
HyperText Markup Language
</span>
<span class="tag tag2">
It is the standard language used to create
and design web pages on the internet.
</span>
</div>
</div>
</body>
</html>
Output:
Output