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

This article mainly introduces CSS how to achieve cascading context, unilateral projection and translucent frame effect related knowledge, the content is detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that after reading this CSS how to achieve cascading context, unilateral projection and translucent frame effect article will have a harvest, let's take a look at it.

Cascading context

Fillet inside the border

Clip-path

Adaptive ellipse

Adaptive width

Projection simulates multiple borders

The second parameter causes the shadow to move down 5px as a whole, the third parameter causes more Gaussian blur of 4px around the shadow (note that due to the overall downward movement of 5px, there is no shadow exposed above at this time), and the fourth parameter shrinks the shadow as a whole by 4px, so there is no Gaussian blur shadow color caused by the blur radius on the left and right sides, thus realizing unilateral projection.

Unilateral projection

You can also set multiple shadow colors separated by commas, such as the following side projection effect: address

Unilateral projection

Irregular projection

Most front-end developers know that the Gaussian mirror effect of paste filtering is achieved by filter: blur (), but seldom use several other color adjustment effects of the filter. The values of filter are blur (), drop-shadow (), url (), brightness (), contrast (), grayscale (), hue-rotate (), invert (), opacity (), saturate (), sepia () ~ can use the compound form such as filter: sepia (1) saturate (4) and so on. The following is a large collection of filter property values: address

Dyeing and fading effect of filter

The css implementation of the pie chart is very strange, so I ignored it. It is recommended to use the implementation scheme of svg, which is very simple. Let's start with a basic teaching.

Draw a circle first:

Where r = "25" is the radius 25, and cx cy represents the x y coordinates of the center of the circle.

A 40-width stroke is defined for the circle:

Pie chart svg

Then set the stroke to a dashed line with a length of 20 at intervals of 10:

When the interval of the dashed line is set to be greater than or equal to the circumference, the segment length of the dashed line is a sector (100% when the segment length is equal to the circumference):

Set the fillet and background color to svg and rotate-90deg to achieve a pie chart: address (use the currentColor keyword and color: inherit to implement the DRY principle. )

However, the sector size of such a pie chart is not easy to calculate. in order to facilitate calculation, the length of the line segment of the dashed line can also be infinitely close to 100, so it is more convenient to set the percentage of the sector. The circumference is 2 π r, so 100 = 2 π r, and the approximate radius r is calculated to be 16. Then use the viewBox attribute of svg to realize the pie chart of adaptive container size: address.

The drawback of this approach is that there will be a gap when setting stroke-dasharray: 100100, which is inevitable with an approximate value.

Background is one of our most commonly used attributes, but as an old front end, I can only be ashamed to say that I don't fully grasp this attribute at present.

Background is an abbreviated attribute that can include multiple attributes: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, background-attachment. Let's take a look at the effects of these attributes one by one:

When abbreviated, background-size can only appear immediately after background-position, with / split, such as "center / 80%".

Translucent border

Background location

It is complicated to set background-position as a percentage value. The percentage value actually performs the following calculation formula:

As can be seen from the calculation formula: when the value is 0%, the actual offset value is 0px, and the left boundary (or upper boundary) of the image coincides with the left boundary (or upper boundary) of the container; when the value is 50%, the actual offset value is the container minus half of the remaining space of the image, and the left and right boundary (or upper and lower boundary) of the image is equal to the left and right boundary (or upper and lower boundary) of the container, and the midpoint of the image coincides with the midpoint of the container. When the value is 100%, the actual offset value is the container minus the remaining space of the image, so the right boundary (or lower boundary) of the image coincides with the right boundary (or lower boundary) of the container. It is also valid when the difference between the two is negative. Address

Background location

Striped background

It can also be set to a vertical striped background:

It can also be set to oblique stripes:

Vertical striped background

Oblique stripes need to be set up four stripes to achieve seamless splicing when tiling.

Better oblique stripes: (the starting value # fb3 0 must be set here)

Better oblique stripes

Grid

Better grid:

Better grid

Chessboard

Folding angle

At this point, the background attribute is basically finished, just watching is useless, more hands-on practice.

Wave point

Chamfer

Pie chart

The animation attribute is an abbreviated form of the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state attributes.

How to add a springback effect to the animation? Here is one of the most convenient methods:

Springback effect

The horizontal axis of the image above is the time, and the vertical axis is the progress of the animation. The Bezier curve in the figure has two control handles, x1, y1 controls the first anchor point, x2, y2 controls the second anchor point. Where x1 and x2 cannot be greater / less than 1, but y1, y2 can. When y2 is greater than 1, it produces the effect of reaching the finish line ahead of time, then passing the finish line, and then returning to the finish line, like a springback. Address

The transition property is an abbreviated property of transition-property, transition-duration, transition-timing-function, and transition-delay. Springback can also be achieved with transition: address

This is the end of the article on "how CSS achieves cascading context, unilateral projection, and translucent border effects". Thank you for reading! I believe you all have a certain understanding of "how to achieve cascading context, unilateral projection and translucent border effect in CSS". If you want to learn more, you are 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.