Several useful css function tips

CSS provides a style description for the HTML markup language, defining how elements in it are displayed. CSS is a breakthrough in the field of web design. It can be used to modify a small style to update all page elements related to it. In this article we will introduce 8 useful tips in CSS functions.

1. Pure CSS Tooltip

Many websites still use JavaScript to create Tooltip effects, but in fact it can be achieved more simply through CSS. The easiest way is to add an attribute with the tooltip text in your HTML code, such as data-tooltip="…" . Then you can add the following code to your CSS file to display the tooltip text through the attr() function:

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

Quite simple, right? Of course, we actually need more code to add styles to the hints, but don't worry, there are powerful and pure CSS libraries called Hint.css and Balloon.css designed for this.

2. Use custom data attributes and attr() function

We have learned how to use attr() to create prompts, and there are also some scenarios where this function can be used. Combined with data attributes, you can create thumbnails with a title and description with a simple line of HTML:

<a class="caption" href="#" data-title= "Vulture" data-description="...">
<img src="img.jpg" alt="Illustration"/>
</a>

Now you can display the title and description through the attr() function:

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

The following are specific examples:

Note: This method may have some problems with browser support. For specific content, you can check the article Accessibility support for CSS generated content.

3. CSS Counters

You can achieve awesome features with CSS Counters. This is not a very well-known property, and most people may even think that browsers do not support this property well, but in fact all browsers support this property:

But you should not use CSS counters Used on ordered lists<ol>, it is more suitable for use on numbers displayed under pagination or image galleries. You can see how to count selected items with very little code (and even no JavaScript) in the following example:

CSS counters are also great for displaying lists of items that can be reordered via drag and drop Dynamically changing numbers on:

As with the last example, we need to remember that the content generated through this method may have some accessibility issues.

4. Frosted effect achieved by CSS filter

In iOS7, Apple implemented the "frosted glass" effect - translucent, blurred elements that look like they cover a layer of frosted glass. Inspired by Apple, this effect is used in many places. Recreating this effect was a bit tricky before the advent of CSS filters. You have to achieve this frosted glass effect by using Blur Image. But now CSS filters are supported by almost all major browsers, so it is much easier to reproduce this effect.

In the future, we can achieve this effect through background filters and filter() functions, but currently only Safari supports both functions.

For more information about CSS filter, you can click here to learn more.

5. Use HTML elements as background

Generally we can set a JPEG or PNG file as the background, or we can also set a gradient background. But did you know that you can set a <div> as a background image by using the element() function? For now, the element() function is only supported in Firefox:

The possibilities are endless, here is an example on MDN.

For relevant introduction to CSS element() function, please click here.

6. Create a better grid through calc()

Fluid meshes are great but they still have serious problems. For example, the spacing at the top and bottom is almost never the same as the spacing at the left and right. Also, if a different grid system is used, the markup will be very confusing. Although flex layout is not the final solution, by combining it with calc() (which can be used as a property value in the CSS file), we are able to create a better grid. Here, George Martsoukos lists many examples, such as a gallery grid with perfect spacing. By using a CSS pre-compiled language such as Sass, building a creative grid system can be very simple and easy to maintain. At the same time, browser support for calc() is almost perfect, so calc() is definitely a function you should master.

For an introduction to the CSS calc() function, click here.

7. Align position:fixed elements through calc()

Another function of calc() is to align position:fixed elements. For example, you have a content wrapper with flowing spacing on the left and right. You want to accurately align elements with a fixed position within this content wrapper. However, in this case, it is very difficult to calculate the specific assignment of the left and right attributes. difficulty. With calc(), you can combine relative and absolute values ​​to precisely position your elements:

.wrapper { max-width: 1060px; margin: 0 auto;
}.floating-bubble { position : fixed; right: calc(50% - 530px); /* 50% - half your wrapper width */}

For example:

You can have a detailed introduction on this aspect Read the article "Aligning position: fixed Elements with CSS calc" by @brnnbrn.

8. Use cubic-bezier() to implement animation

In order to make the user interface of a website or APP more attractive, you can use some animations, but you can choose the speed of the transition effect. Curves are quite limited, e.g. linear or ease-in-out. The standard speed curve cannot even achieve the effect of elastic movement. By using the cubic-bezier() function, you can achieve exactly the animation you want.

There are two ways to use cubic-bezier() - understand the mechanism behind it and create it yourself, or use the cubic-bezier generator.

To be honest, I use the latter.

For a detailed introduction to cubic-bezier(), please click here.

Summary

Smarter use of CSS functions can not only solve the above problems such as creating a better grid, it can also give you more creative freedom. As browser support gets better and better, you can use CSS functions such as calc() to modify and improve your previous CSS code.

This article is translated based on @Anselm Urban's "8 Clever Tricks with CSS Functions". The entire translation contains our own understanding and thoughts. If the translation is not good or there is something wrong, please ask friends in the industry for advice. If you want to reprint this translation, please indicate the English source: https://www.sitepoint.com/8-clever-tricks-with-css-functions.

The above are 8 css function tips. Friends who think they are good should quickly collect them.

Related recommendations:

Jquery css function to dynamically manipulate the style of DOM nodes

##CSS3 tips for drawing various basic graphics

The most complete CSS development common skills

The above is the detailed content of Several useful css function tips. For more information, please follow other related articles on the PHP Chinese website!