A few useful CSS function tips

CSS provides a style description for the HTML markup language that defines how elements are displayed. CSS is a breakthrough in the field of web design. It enables you to modify all the page elements associated with a small style update. In this article we will cover 8 useful tips for CSS functions.

1. Pure CSS Tooltip

Many websites still use JavaScript to create a ToolTip effect, but it's actually easier to implement with CSS. The simplest way is to add a property with hint text in your HTML code, such as data-tooltip= "...". You can then add the following code to your CSS file by using the attr () function to display the hint text:

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

It's pretty simple, right? Of course we still need more code to add style to hints, but don't worry, there's a strong and pure CSS Library and balloon.css for this design called HINT.CSS.

2. Using custom data attributes and the attr () function

We've learned how to use attr () to create hints, and there are other scenarios where you can use this function. Combined with data properties, you can create thumbnails with headings and descriptions in a very simple line of HTML code:

<a class= "caption" href= "#" data-title= "vulture" data-description= "..." >

</a>

Now you can use the attr () function to display the caption and description:

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

The following are specific examples:

Note: This method may have some problems with browser support, and you can view the content of accessibility supports for CSS generated this article.

3. CSS Counters

You can achieve awesome functionality with CSS counters. This is not a very well-known attribute, and most people may even think that the browser does not support this property, but in fact all browsers support this property:

But you should not use CSS counters on an ordered list <ol>, which is more suitable for using numbers that are displayed under similar paging or picture libraries. You can use the following example to see how to count the selected items using very little code (even without JavaScript):

CSS counters is also ideal for displaying dynamically changing numbers on a list of items that can be reordered by drag-and-drop:

As a final example, we need to remember that the content generated by this method may have some problems with accessibility.

Matte Effect with 4.CSS filter

In IOS7, Apple achieves the "frosted glass" effect-translucent, blurred elements that appear to cover a layer of frosted glass. Inspired by Apple, this effect has been applied to many places. It's tricky to reproduce the effect before the CSS filter appears. You have to use blurred images to achieve the effect of this frosted glass. But now CSS filters are supported by almost all major browsers, so it's much easier to reproduce the effect.

In the future, we can use the background filter and the filter () function to achieve this effect, but currently only Safari supports these two features.

For more information on CSS filter, click here to learn more.

5. Use HTML elements as backgrounds

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

The possibilities are endless, and here is an example of an MDN.

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

6. Create a better grid with Calc ()

The fluid grid is great but there are still serious problems. For example, the spacing between the top and bottom is almost impossible with the same size as the left and right spaces. In addition, if you use a different grid system, the tag is very confusing. Although elastic layouts are not the ultimate solution, we can create a better grid by combining it with Calc (), which can be used as a property value in a CSS file. Here, George Martsoukos lists a number of examples, such as a gallery grid with perfect spacing. By using the CSS precompiled language, such as sass, building a creative grid system can be very simple and easy to maintain. While the browser's support for Calc () is almost perfect, Calc () is definitely a feature you should be able to master.

A description of the Calc () function related to CSS can be found here.

7. Align the position:fixed element with Calc ()

Another function of Calc () is to align the elements of the position:fixed. For example, you have a content wrapper that has a flow spacing around it, and you want to precisely align the position to a fixed element within the content wrapper, but it is difficult to calculate the exact assignment of the left and right properties in this case. With Calc (), you can combine relative and absolute values to pinpoint your element:

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

Like what:

A detailed introduction to this can be found in the article "aligning position:fixed Elements with CSS Calc" written by @brnnbrn.

8. Animating with Cubic-bezier ()

To make the user interface of a website or app more appealing, you can use some animations, but the speed curve of the transition effect you can select is quite limited, for example, linear or ease-in-out. and the standard speed curve even the effect of elastic motion can not be achieved. By using the Cubic-bezier () function, you can precisely implement the animation effect you want.

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

To tell you the truth, I use the latter.

For a detailed introduction to Cubic-bezier () click here.

Summarize

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

This article according to the @Anselm Urban "8 Clever Tricks with CSS Functions" translation, the entire translation with our own understanding and thought, if the translation is not good or there is a wrong place also please peer friends pointing. If you want to reprint this translation, please specify the English source: https://www.sitepoint.com/8-clever-tricks-with-css-functions.

The above is the 8 CSS function tips, feel good little friends quickly collection up it.