Tutorial on how to create a tag cloud with HTML and CSS, no JavaScript needed. Tagged with html, css, webdev, tutorial.
— 到這裡瞭解： dev.to/alvaromontoro/create-a-tag-cloud-with-html-and-css-1e90
<html lang="zh-Hant">
<meta charset=UTF-8>
<title>Words Cloud Sample</title>
<head>
<style>
ul.cloud {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
line-height: 5rem;
}
ul.cloud a {
color: #a33;
display: block;
font-size: 3rem;
padding: 0.25rem 0.5rem;
text-decoration: none;
position: relative;
}
ul.cloud a[data-weight="1"] {
--size: 1;
}
ul.cloud a[data-weight="2"] {
--size: 2;
}
ul.cloud a[data-weight="3"] {
--size: 3;
}
ul.cloud a[data-weight="4"] {
--size: 4;
}
ul.cloud a[data-weight="5"] {
--size: 5;
}
ul.cloud a[data-weight="6"] {
--size: 6;
}
ul.cloud a[data-weight="7"] {
--size: 7;
}
ul.cloud a[data-weight="8"] {
--size: 8;
}
ul.cloud a[data-weight="9"] {
--size: 9;
}
ul.cloud a {
--size: 4;
font-size: calc(var(--size) * 0.5rem + 1rem);
}
ul.cloud[data-show-value] a::after {
content: " (" attr(data-weight) ")";
font-size: 2rem;
}
ul.cloud li:nth-child(2n+1) a {
color: #181;
}
ul.cloud li:nth-child(3n+1) a {
color: #33a;
}
ul.cloud li:nth-child(4n+1) a {
color: #c38;
}
ul.cloud a {
opacity: calc((15 - (9 - var(--size))) / 15);
}
</style>
</head>
<body>
<ul class="cloud" role="navigation" aria-label="Words Cloud">
<li><a data-weight="4" href="/tag/http">HTTP</a></li>
<li><a data-weight="2" href="/tag/ember">Ember</a></li>
<li><a data-weight="5" href="/tag/sass">Sass</a></li>
<li><a data-weight="8" href="/tag/html">HTML</a></li>
<li><a data-weight="6" href="/tag/flexbox">FlexBox</a></li>
<li><a data-weight="4" href="/tag/api">API</a></li>
<li><a data-weight="5" href="/tag/vuejs">VueJS</a></li>
<li><a data-weight="6" href="/tag/grid">Grid</a></li>
<li><a data-weight="3" href="/tag/rest">Rest</a></li>
<li><a data-weight="9" href="/tag/javascript">JavaScript</a></li>
<li><a data-weight="3" href="/tag/animation">Animation</a></li>
<li><a data-weight="7" href="/tag/react">React</a></li>
<li><a data-weight="8" href="/tag/css">CSS</a></li>
<li><a data-weight="1" href="/tag/cache">Cache</a></li>
<li><a data-weight="3" href="/tag/less">Less</a></li>
</ul>
</body>
</html>
Brassai Kao’s Tech Weave 
Leave a comment