Pure CSS Tooltips

Many websites still use JavaScript to create tooltips, but in fact it is easier to use CSS. The easiest solution is to use data properties in HTML code to provide tooltip text, such as data-tooltip="…". With this tag, you can put the following into CSS to display tooltip text within the attr() function:

.tooltip::after {
  content: attr(data-tooltip);
}

It's very simple and clear, right? Of course, more code is needed to actually style the tooltips, but don't worry, there is a great pure CSS library specifically for this purpose called Hint.css.

(abuse) custom data attributes and attr() function

We have used attr() for tooltips, but it has some other use cases. Combining data properties, you can build thumbnail images with titles and descriptions using just one line of HTML code:

<a class="caption" href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b" data-title="禿鷲" data-description="...">
  <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/174011191897662.jpg"  class="lazy" alt="8 Clever Tricks with CSS Functions " />
</a>

You can now use the attr() function to display the title and description:

.caption::after {
  content: attr(data-title);
  ...
}

This is a working example of a thumbnail with hover display animation title: [CodePen example link] (assuming that CodePen link should be inserted here)

Note: The generated content may have problems with accessibility. This article on accessibility support for CSS generated content provides a useful interpretation of this topic.

You can use CSS counters, which seems like magic. It's not the most well-known feature, and most people may think it doesn't support it very well, but in fact, every browser supports CSS counters: [Can I Use css-counters?] (assuming Can I Use should be inserted here Link)

While you should not use CSS counters for ordered lists (<ol>), counters are great for pagination or displaying numbers under items in gallery. You can also count the number of selected items, which is very impressive considering that you need very little code (and no JavaScript): [CodePen sample link] (assuming that CodePen link should be inserted here).

CSS counters are also great for dynamically changing numbers in the project list, which can be reordered by drag and drop: [CodePen Example Link] (assuming that CodePen link should be inserted here).

As with the last example, remember that the generated content may have problems with accessibility.

With the release of iOS 7, Apple brings us a “frosted glass” effect—transparent, blurry elements that look like frosted glass windows. Inspired by Apple's implementation, this effect began to appear in many places. Reproducing this effect is a bit tricky before you have a CSS filter, you have to use a blurred image to create a frosted glass effect. Now, almost all major browsers fully support CSS filters, so it's much easier to reproduce this effect. [Can I Use css-filters?](assuming that Can I Use link should be inserted here)

In the future, we can use the

functions to create similar effects, but these two functions are currently supported only by Safari. backdrop-filter filter()

Usually, you specify a JPEG or PNG file as the background image, or maybe a gradient. But did you know that using the

as the background image? Currently, the element() function is only supported by Firefox: [Can I Use css-element-function?] (assuming that the Can I Use link should be inserted here) <div> element()The possibilities are almost limitless, here is an example from MDN.

Fluid mesh is a great thing, but there are some serious problems. For example, it is not possible to make the spacing between the top and the bottom the same size as the spacing between the left and right. Also, the marking is very confusing, depending on the grid system you are using. Even flexbox itself is not the final solution, but using the

is a convenient feature you should definitely use. [Can I Use calc?](assuming that Can I Use link should be inserted here)calc() calc()

Another use case for a function is to align elements with fixed positions. For example, if you have a content wrapper on the left and right with fluid spacing, and you want to precisely align the fixed elements inside that wrapper - you will have a hard time determining the "right" or "left" attribute selection Which value? With

, you can combine relative and absolute values ??to align elements perfectly: calc() calc()

.tooltip::after {
  content: attr(data-tooltip);
}