[CSS secret] stripe background

Background Knowledge linear gradient linear-gradient

Case

Background:linear-gradient (#fb3, #58a);

If you pull these two color markers closer together, set to Background:linear-gradient (#fb3 20%, #58a 80%), then the true gradient will only appear in the middle of the container 60% of the area. What happens if we overlap the two color markers?

If multiple color labels have the same position, they produce an infinitely small transition area, with the transition starting and ending colors being the first and last specified values. In effect, the color changes abruptly in that position, rather than a smooth gradient process.

Tips: The essence of a gradient is actually a code-generated image that can be treated like any other background image, so it can be resized by the Background-size property.

background-size:100% 30px; By default the background picture is repeated tiled, setting background-repeat:no-repeat so that the picture does not repeat

You can also adjust the color label position to achieve unequal width of the stripes, in order to avoid each change in the stripe width to change two values, we found a shorthand method: Background:linear-gradient (#fb3 30%, #58a 0);

If the position value of a color label is smaller than the position value of the color label that

precedes it in the entire list, the position value of the color label is set to the maximum value of the value of the position that was previously colored.

Create horizontal stripes of three colors

Background:linear-gradient (#fb3 33.3%, #58a 0, #58a 66.6%, Yellowgreen 0);

background-size:100% 45px;

Vertical stripes

You can specify the direction of the gradient by an extra parameter when you specify a gradient color. The default value is to bottom, which is horizontal stripes.

Background:linear-gradient (to right, #fb3 50%, #58a 0);

background-size:30px 100%;

Diagonal stripes

Background:linear-gradient (45deg, #fb3 25%, #58a 0, #58a 50%, #fb3 0, #fb3 75%, #58a 0);

background-size:42px;

But what if we want to implement stripes of different angles such as 30°,60°? If you simply modify the value of the gradient angle, the result is obviously bad.

both Linear-gradient and radial-gradient have a cyclic-enhanced (repeating gradient) repeating-linear-gradient and repeating-radial-gradient repeating gradient feature: The color label is repeated indefinitely until it fills the entire background (background-size area).

Use a repeating gradient to implement the front 45deg diagonal stripes (implemented via linear-gradient and Background-size)

The above style can also be achieved by combining repeating-linear-gradient with Background-size. This method is not recommended for individuals because of inaccurate decimals.

Background:repeating-linear-gradient (45deg, #fb3 0, #fb3 25%, #58a 0, #58a 50%);

BACKGROUND-SIZE:42.426406871PX 42.426406871px;

Flexible tonal stripes

Here's a little tip:

If the color of the stripe pattern belongs to the same colour, the difference is small, but there is a slight difference in lightness. In this case, according to the previous wording, if you need to adjust the color, we need to modify the four color values. At this time there is a trick, the deepest color designated as the background color, translucent white [Hsla (0,0%,100%,alpha)] stripes superimposed on the background color to get light stripes. At this time only need to modify the background color to get different color changes in the stripes. The background color is also well displayed for older browsers that do not support gradient colors.

Background: #58a;

Background-image:repeating-linear-gradient (30deg, Hsla (0,0%,100%,.1), Hsla (0,0%,100%,.1) 15px, transparent 0, Transparent 30px);

Conclusion

In this article, we implement a simple stripe background with CSS gradients. In the next article, we will combine multiple gradient patterns with CSS gradients and overlays to construct very complex patterns.

[CSS secret] stripe background