catalogue
3: Flexible background stripes
1: Vertical stripe
The code of vertical stripes is almost the same as that of horizontal stripes. The difference is that we need to add an additional parameter at the beginning to specify the direction of gradient. To button by default
Effect display:
Code snippet:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Striped background</title>,
<style>
div{
height: 200px;
width: 500px;
background:linear-gradient(to right,/*Or 90deg*/ #fb3 50%,#58a 0) ;
background-size: 30px 100%;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>II. Oblique stripes
After completing the vertical stripes, we can think of changing the value of background size and the direction of gradient to get the inclined stripes
Effect display:
Code snippet:
background:linear-gradient(45deg, #fb3 50%,#58a 0) ;
background-size: 30px 30px;It can be seen that this method is not feasible because we only rotate the gradient inside each "patch" by 45 °, rather than the whole background. As long as each patch contains four stripes, it is possible to achieve seamless connection
Effect display:
Code snippet:
div {
height: 200px;
width: 500px;
background: linear-gradient(45deg,
#fb3 25%, #58a 0,
#58a 50%, #fb3 0,
#fb3 75%, #58a 0);
background-size: 30px 30px;
}We can see the results in the figure above. As you can see, we successfully created diagonal stripes, but these stripes look thinner than the horizontal and vertical stripes we made earlier. In order to understand this, we need to recall the Pythagorean theorem we learned in school and use it to calculate the length of the hypotenuse of a right triangle. This theorem states that when a and B are the right angle sides of a right triangle, the length of the hypotenuse is equal to √ a+b2. For a 45 ° right triangle, its two right angled sides are equal in length, so this formula will become √ 2a =av2. In our oblique fringe, the length specified by the background size determines the length of the hypotenuse of the right triangle, but the width of the fringe is actually the height of the right triangle. You can see the graphical explanation in the figure below.
This means that if we want to change the width of the stripes to 15px, we need to specify the background size as 2 × 15 √ 2 ~ 42.426 406871 pixels:
You can see the final effect in the figure above. However, unless someone threatens you with a gun on your head, you must set the width of the diagonal stripe to a completely accurate 15 pixels. I strongly recommend that you round this long string of numbers to 42.4px, or even 42px. (of course, in the above case, you will still be killed. Because √ 2 is not an integer, the stripe width we finally get can always be only one; approximate value - although it is quite accurate.)
III: better oblique stripes
The previous display method is not flexible enough. Suppose we want to make the stripes not 45 ° but 60 °? Or 30 °? Or 3.141 5926535 °? If we just change the angle of the gradient, the result will look pretty bad. (for example, in the figure below, we tried to achieve 60 ° stripes, but failed.)
Fortunately, we have a better way to create diagonal stripes. A little-known truth is that linear gradient () and radial gradient () also have a circular enhanced version: repeating linear gradient () and repeating radial gradient (). They work in a similar way to the previous two, with one difference: the color code repeats indefinitely until the whole background is filled. Here is an example of a repeating gradient:
60 ° example
Repeat gradient
Code snippet
background: repeating-linear-gradient(45deg,
#fb3, #58a 30px);
Repeated linear gradients are perfect for - you guessed it - stripe effects! Thanks to their talent of infinite circulation, a gradient pattern can automatically repeat and spread the whole background. Therefore, we no longer need to worry about how to create patches that can be seamlessly spliced.
For comparison, the effect I created before can also be generated by this repeated gradient:
Effect display
Code snippet
background: repeating-linear-gradient(45deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);Change to 60 ° below
background: repeating-linear-gradient(60deg,
#fb3, #fb3 15px, #58a 0, #58a 30px);Flexible homochromatic stripes:
In most cases, the stripe pattern we want is not composed of several colors with great differences. These colors often belong to the same color system, but have slight differences in lightness. For example, let's take a look at this stripe pattern:
Effect display:
Code snippet:
background: repeating-linear-gradient(30deg,
#79b, #79b 15px, #58a 0, #58a 30px);As can be seen in the above figure, the stripes are composed of a variation of the main tone. However, the relationship between these two colors is not reflected in the code. Besides this #58a) and its light color, if we want to change the main tone of this stripe, we even need to modify it everywhere! Fortunately, there is a better way: instead of assigning colors to each stripe separately, assign the deepest color as the background color, and superimpose translucent white stripes on the background color to get light stripes:
Display effect:
Code snippet:
background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0, 0%, 100%, .1), hsla(0, 0%, 100%, .1) 15px,
transparent 0, transparent 30px);The result looks exactly the same as before, but now we only need to modify one place to change all colors. We also get an additional benefit. For browsers that do not support CSS gradients, the background color here also plays a fallback role. Not only that, in the next introduction, we will also see that through superposition, multiple gradient patterns with transparent areas can construct very complex patterns.