Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use HTML and CSS to achieve tag cloud effect, I believe that most people do not understand, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

HTML infrastructure

As mentioned earlier, the tag cloud is a list of connections. So from a semantic point of view, it makes sense to use unordered lists to express each tag, regardless of how popular it is, otherwise it makes no sense.

There is a hyperlink tag in each list item, so the general structure looks like this:

Word1 Word2 Word3

The weight of each tag is calculated in advance, and then add it to or on it, we will add it to the link for the time being.

The weight of the label corresponding to the display of text is also large, representing its popularity.

Word1 Word2 Word3

Note: the data-weight here is calculated through data-count and data-total, and there is no way to calculate the representation directly through two attributes, so we focus on an attribute like data-weight.

In this way, the basic HTML structure code is written, and it is perfect with a few attributes.

Class: helps you determine which tag cloud it is when adding styles

Role: this is a navigation component that identifies and assists on screen readers

Aria-label: add title and description to accessibility

Note: if the list is inside the tag, you don't need to add role= "navigation", you can use aria-labelledby instead of the navigation tag to point to the navigation title.

Let's refine the list data and add some development-related nouns as tags to make it look a little more realistic.

HTTP Ember Sass HTML FlexBox API VueJS Grid Rest JavaScript Animation React CSS Cache Less

Here is what the tag cloud now looks like:

This is the result of not adding any styles yet, and then adding some styles to it.

Add styles to the tag cloud

The following is what we want to solve by adding styles:

Let tags be displayed as inline elements

Let the font-size attribute of each tag be displayed according to the data-weight size

Add weight to the right side of the label

Let the color of the label be displayed randomly

Add: hover and: focus dynamic styles to the tag

Add styles to ul

First remove the dots and indents in front of the list:

List-style: none;padding-left: 0

Then set the ul to display as Flexbox, and center horizontally and vertically to ensure that all tag elements are displayed in one or more lines:

Display: flex;flex-wrap: wrap;align-items: center;justify-content: center

Add uplink heights to maintain a vertical distance from each other, and the final ul element has the following style:

Ul.cloud {list-style: none; padding-left: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; line-height: 2.5rem;}

However, at this time, the tag cloud still looks a lot worse.

Resize labels according to weight

Let's start labeling some small changes:

Ul.cloud a {color: # a33; display: block; font-size: 1.5rem; padding: 0.125rem 0.25remr; text-decoration: none; position: relative;}

With the above style, all the labels turn light red and set the 1.5rem size

However, our requirement is that the font size is based on data-weight, how to achieve it?

One way for the web standard is that CSS can read the value of the data attribute of HTML through the attr () method, so we can read data-weight in the following ways

Attr ([attribute-name] [attribute-unit]? [, default-value]?)

Unfortunately, this representation and feature are not supported by any browser at the moment. Instead, attr () will return only one string and can only be used in the content property.

If the web standard supports this approach, we can read the data of attribute weights directly, save them in the CSS variable, and manipulate them directly, as shown below:

Ul.cloud a {--size: attr (data-weight number, 2); font-size: calc (var (--size) * 1rem);}

But this won't work, we can only use the CSS rule, property selector: data-attribute

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.25rem + 0.5rem) / *. * /}

In order to avoid setting the font size directly to weight resulting in too large, so through a certain method of calculation, the results are as follows:

Now it seems to have achieved a little.

Add a weight display to the label

Our common tag cloud effects are displayed with weights next to the tags, which are already available. We will display it in the content of the pseudo element:: after.

Ul.cloud [data-show-value] a::after {content: "(" attr (data-weight) ")"; font-size: 1rem;}

Then you need to add a [data-show-value] attribute selector to the ul element, and set its value to true or false to control whether the number weight after the tag is displayed.

Note: the value of the data-show-value property selector is a Boolean value, and it will display even if you set it to false. If you do not let it display, remove the property.

This is the effect of displaying numerical weights.

The number next to the label will not be displayed in the following case

Add color to the label cloud

All the labels look dull in one color, and we will try to add different colors to it in two different ways.

Use randomly generated colors

There is no such thing as a random number in CSS (although it can be simulated). What we are going to do is to define a different color for the tag according to its serial number, as follows:

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;}

In this way we added green, blue and purple instead of the previous light red, although it is not completely random (there is a certain pattern), but it is difficult for users to find.

Use different transparency values of the same color

We achieve the effect of emphasizing popularity by increasing the contrast of tags, and the use of dark colors is more obvious in light backgrounds.

The color value in HSL format can be implemented, but we use the fastest way to set the transparency of the label directly. The transparency value is calculated according to the weight value:

Look at the effect of the change.

Define its outline

The outline style is more important when we touch the tag, especially for people with disabilities in terms of accessibility.

We will add a border to outline that is consistent with the color of the label font

Ul.cloud a:focus {outline: 1px dashed;}

Here we simulate it through a mouse click event.

Add dynamic effect

To increase interactivity, we add a simple animation: when the user moves or hovers over a tag, the background color of the tag changes and has a horizontally unfolded effect.

Because it is state-dependent animation, we will use transition instead of animation animation.

This is achieved by changing the width of the pseudo element of the a tag:: before from 0 to 100% in the focus and hover states.

State behavior of CSS code and pseudo elements:

Ul.cloud a::before {content: "; position: absolute; top: 0; left: 50%; width: 0; height: 100%; background: var (--color); transform: translate (- 50%, 0); opacity: 0.15; transition: width 0.25s;} ul.cloud av focus absolute; top beforehead. Cloud a:hover::before {width: 100%;}

For animation effects: users cannot turn it on or off according to their preferences. If it is really a requirement, we still have to respect the user's preference to remove the animation.

Https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion can be achieved through the media query feature prefers-reduced-motion

@ media (prefers-reduced-motion) {ul.cloud * {transition: none! important;}} above is all the content of the article "how to use HTML and CSS to achieve tag cloud effect". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.