8 fantastic places for CSS functions

The CSS language is more powerful than many web programmers think. This style sheet language is becoming more and more powerful, giving the browser the functionality that was intended to be implemented with JavaScript. This article will cover the 8 magical functions of a CSS function without JavaScript.

1. ToolTips of pure CSS

Many websites are still in use JavaScript creates tooltips, but in reality it's easier to implement with CSS. The simplest way is to provide the ToolTip text in the Data property of the HTML code, for example: data-tooltip= "...". This allows you to add the following code to the CSS to display the ToolTip text in the attr () function:

. ToolTip:: After {

Content:attr (Data-tooltip);}

It's understood, isn't it? Of course , to design tooltips also need more code, but do not worry, there is a great pure CSS library is born for this, called Hint.css.

2. Use the custom Data property and the attr () function

we 've used attr () in ToolTips, but there are some things we can do with attr (). Combined with the Data property, you can create thumbnails with only one line of HTML code through the title and description:

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

</a>

you can then use the attr () function to display the title and the description:

. caption::after {

Content:attr (Data-title);

...

}

Here is an example of a thumbnail that hover up a caption animation effect:

See the Pen Thumbnail with animated captions to SitePoint (@SitePoint) on Codepen.

Description: CSS-generated content is not easy to get. In this regard, the article about getting CSS to generate content part of the contents can be borrowed.

3. CSS counters

CSS counters can make a magical effect. The counter is not the most famous feature, and most people may think it's not good enough, but in fact, all browsers support CSS counters:

The counter is good for paging or showing the number of items below gallery, but should not be used on an ordered list (<ol>). You can also use CSS counters to calculate the number of options you have, and the amount of code will amaze you (and no JavaScript):

See the Pen Selection CSS Counter by would Boyd (@lonekorean) on Codepen.

in a list that can be dragged and sorted The number of dynamic CSS counter changes is also great:

See the Pen CSS Counters drag-and-drop demonstration to SitePoint (@SitePoint) on Codepen.

As in the previous example, remember that the content generated by--CSS is not easily accessible .

4. CSS filters to achieve the effect of frosted glass

Apple's IOS 7 brings us the "frosted glass" effect-a translucent, blurred element that looks like frosted windows. With the introduction of Apple, this effect can be seen in more and more places. It's a bit complicated to reproduce the effect--only fuzzy translucent images can be used to achieve the effect of the frosted glass before CSS filters. Currently, almost all mainstream browsers support CSS filters, which is much easier to reproduce.

currently backdrop filters and filter () functions are only supported by Safari, but we can use them to achieve similar results in the future.

5. HTML elements do background map

are usually specified A JPEG or PNG file acts as a background map or gradient. But do you know that the element () function can be used to make a background map with <div>? Currently only Firefox supports the element () function:

The Element () function has infinite possibilities, and here is an example of an MDN.

6. Calc () implement smart grid

Fluid Grids (Fluid grid division) is great, but there are a few serious problems. For example, the gap between top and bottom cannot be achieved and the left and right voids are the same size. In addition, the markup is somewhat confusing depending on the raster system you are using. Even Flexbox is not a good solution. But with the Calc () function, which can be used as value in CSS, the raster will become even better. In? SitePoint in this tutorial, George Martsoukos lists a few examples, such as a perfectly spaced grid gallery. Using a CSS pre-compiler, such as Sass, with Calc ()? Implementing a set of raster systems is simple and easy to maintain. Calc () has a nearly perfect browser support and is highly recommended.

7. CSS Calc () aligns the position:fixed elements

Another usage scenario for the Calc () function is to align the elements of the fixed positioning. For example, there is a content wrapper that has gaps around it, and if you want to precisely align a fixed element within a wrapper-it is difficult to figure out how much to assign to the "right" or "left" property. With calc () You can combine the values of relative and absolute to precisely align elements:

. Wrapper {

max-width:1060px;

margin:0 Auto;} . Floating-bubble {

position:fixed;

Right:calc (50%-530px); /* 50%-half your wrapper width */}

An example is provided here:

See the Pen aligning "position:fixed" Elements with CSS calc () by SitePoint (@SitePoint) on Codepen.

8. cubic-bezier () animation

You can use animations to make your Web site or app's UI more compelling. However, the standard easing options are very limited, such as "linear" or "ease-in-out". Bounce animations are not possible with standard options. Using the Cubic-bezier () function, you can animate the elements the way you want them to.

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

To tell the truth, I like the latter way.

Conclusion

Smart Use CSS functions can not only solve problems like building a more rational grid system, it also gives you more opportunities to create. As browsers become more supportive, you should really revisit your CSS code and consider optimizing with functions like Calc ().

Article Source: Web Front-Bole online

8 fantastic places for CSS functions