Shulou(Shulou.com)06/01 Report--

This article mainly shows you "what are the advanced use skills of CSS", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "what are the advanced use skills of CSS" this article.

CSS

How to display a color picture as a black and white picture on the page?

We need to use a filter attribute. In webkit,-webkit-filter specifically provides some effects for the rendering of elements, such as grayscale, brightness, blur, etc.

Using the grayscale control grayscale attribute, you can easily set the image to black and white.

We see the following picture.

Advanced CSS use skills to make your page cooler and more productive

Original picture

When we add the following code.

Advanced CSS use skills to make your page cooler and more productive

CSS code

You can see the picture as shown below.

Advanced CSS use skills to make your page cooler and more productive

Processed pictures

Sometimes we set the top of the page to a shadow effect. How do you do that?

With the pseudo element of body: before, extra elements can be reduced.

Add a div to the top and set a height with a width of 100%

Set its position to fixed, and then set the offset to the set height value.

Sets the box-shadow property, which is equal to the set height value.

The resulting code is as follows.

Advanced CSS use skills to make your page cooler and more productive

Add shadows at the top of the page

After running the above code, you can see the shaded effect at the top of the entire page.

If you have a very simple page that requires all the elements to be displayed vertically and centered, the method of implementation is actually very simple.

Set the align-related property to center.

Displag is set to flex.

The resulting code is as follows.

Advanced CSS use skills to make your page cooler and more productive

Vertical centered CSS method

Once set, we can see that no matter how high the window is set, all elements are vertically centered.

However, this method has a drawback, that is, all the elements will be arranged horizontally and centered vertically. when there are too many elements on the page, the page will be stretched horizontally, which is not very beautiful.

Therefore, this method is recommended when there are few page elements.

Advanced CSS use skills to make your page cooler and more productive

Element is vertically centered

In a list created with ul > li, if you want to select several of these elements, we can use the nth-child selector, for example: nth-child (1) represents the first element.

So if we want to choose the first to third elements, what should we do with nth-child?

Many people's first choice is: nth-child (1),: nth-child (2),: nth-child (3), and then set the property.

In fact, there is an easier way, that is to use a negative selector.

: nth-child (- nasty 3), which means to select from the first to the third element.

We can test through the following example, first look at the HTML code of the page, and set all their display to none, so that we can hide all the li.

Advanced CSS use skills to make your page cooler and more productive

HTML code

Then set the css property through the nth-child selector.

Advanced CSS use skills to make your page cooler and more productive

Nth-child selector

Finally, take a look at the content rendering on the page, you can see that only the first three li are actually selected, in line with expectations.

Advanced CSS use skills to make your page cooler and more productive

Page content

The table element of the page, if you do not set the width of the tr > td, the width of the column td will change with the content, which will make the page layout ugly.

We can set each column of the table to the same width, so that no matter how the content changes, the layout of the page will not be changed.

You only need to use the following property.

Advanced CSS use skills to make your page cooler and more productive

Table column equal width

The actual effect is shown in the figure below.

Advanced CSS use skills to make your page cooler and more productive

Table column equal width

A new calc () method has been added in CSS3 to dynamically calculate values, whether numeric or percentage, to participate in the calculation.

This method is very suitable for adaptive containers, dynamically calculating width and height, spacing (margin,padding), border (border) and so on, so that when the container size changes, the layout between elements will not be changed.

For example, the two div we defined below.

Advanced CSS use skills to make your page cooler and more productive

CSS attribute

The effect of the page you see is shown in the following figure.

Advanced CSS use skills to make your page cooler and more productive

Calc () effect

Suppose there is a very important area on the page, only read-only, can not let the mouse click, you can directly disable the mouse click event.

This adds the pointer-event property to CSS3, as long as it is set to none.

Advanced CSS use skills to make your page cooler and more productive

Disable mouse clicks

Sometimes we can see some text gradients on the page, as shown in the following figure.

Advanced CSS use skills to make your page cooler and more productive

Gradient text

How is this effect achieved?

By setting the pseudo element and then using the-webkit-mask-image attribute in the pseudo element, this attribute is specifically used to produce a masking effect.

Then the words of the mask effect are coincident with the original article to achieve the above effect.

We set an h3 tag, and then set the data-text attribute, which has the same value as the page display value.

Advanced CSS use skills to make your page cooler and more productive

HTML element

Then set the corresponding CSS property.

Advanced CSS use skills to make your page cooler and more productive

CSS attribute

When we run on the page, we can get the text gradient effect above.

Similar to the gradient text above, blurred text has a special property that can be set, and that is text-shadow.

With the following simple code, you can get the obscure text.

Advanced CSS use skills to make your page cooler and more productive

Fuzzy text style

The effect is shown in the following figure.

Advanced CSS use skills to make your page cooler and more productive

Fuzzy text

These are all the contents of this article entitled "what are the Advanced skills for using CSS?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.