Using CSS to achieve JS effect

This time to everyone with CSS to achieve the effect of JS, with CSS to realize the attention of JS, the following is the actual case, together to see.

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

2. CSS3 Counters

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:

Insert a piece of code here

　　<input type="checkbox" /><lable>里面是内容</label>

What we need here is a check function similar to input AH upload ah and so on. But we don't like their style, they need to write their own style.

At this point we can use Position:absolute; Left: -9999px; leave the document flow so that it does not occupy space and does not show up on the label to write the effect and style you want.

3. Create a better grid with CLAC ()

Using Flex layouts

Temporarily pending

4. By CLAC () to its position:fixed element

Another function of Calc () is to use the elements of its position:fixed such as you have a content wrapper. There is a flow of space between the left and right you want to precisely position:fixed the elements within this content wrapper. However, it is difficult to calculate the specific assignment of the left and right properties in this case. The Calc () allows precise positioning.

. wrapper{max-width:1000px;　　margin:0 Auto;　　}. float-bubble{positon:fixed; Right:calc (50% -500px); }

Clac (): calc () literally we can interpret him as a function. In fact, Calc is the abbreviation for the English word Calculate (calculation), is a new function of CSS3, which is used to specify the length of the element. For example, you can use Calc () to set dynamic values for attributes such as border, margin, pading, font-size, and width for an element. Why is it a dynamic value? Because we use the expression to get the value. The biggest benefit of Calc (), however, is that the width of the element can be calculated from Calc () using the fluid layout.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

How to omit CSS custom text

What is the difference between href and src, link, and @import?

Properties of CSS3 Transition, animation, transform