Brassai Kao’s Tech Weave

Tag: c38

  • Create a tag cloud with HTML and CSS – DEV Community

    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>