#01 CSS Geometric background: stripes, lattices, dots, board lattice background (CSS background) #01 Horizontal stripes

↓ Today's learning focus  ↓

• Learn to draw various stripes, lattice background
• Learn to draw various dot backgrounds
• Learn to draw various checkerboard backgrounds 

In addition to the simple gradient color, the gradient layer can also extend to draw other patterns: such as stripes, lattices, dots, checkerboard background, etc., it's amazing! These special backgrounds are what I learned from a good CSS book "CSS Secrets". There are many magical little CSS knowledge in this book, and everyone can borrow it to see it.

But because the book came out in 2016, some grammars did not support it at the beginning, but now it has been supported. This article is dominated by the present and saves some past practices.

Before reading this article, you must first use the basic gradient color and understand the multiple backgrounds.

1. Striped background

To make a striped background is very simple. The principle is to use a linear gradient. When the positions of the two colors overlap, a color breakpoint can be created.

Then, use again background-size Set the size of the stripes, and finally use the CSS background preset to repeat ( background-repeat: repeat ) The conditions can create different repeated striped backgrounds.

1. Horizontal stripes

div {
    background: linear-gradient(
                    #e16e5c 0%,
                    #e16e5c 40%,
                    #f6e3cd 40%);
    background-size: 100% 50px;
}

But there is actually a more concise approach. Here is a key point:

If the position of a color is less than the position of any color in front of it, its position will be set to the maximum position of any color stop point in front of it.

This means that if we set the position of the second color to 0, the browser will adjust its position to the position of the front color stop point, so our CSS code will be more concise and DRY:

div{
    background: linear-gradient(
                    #e16e5c 40%,
                    #f6e3cd 0);
    background-size: 100% 50px;
}

It makes the same sense to build more than two colors.

In addition, the position where the same color starts and ends in the gradient layer (also called the stop point), now the support can be written together, as follows #edb71e 0 66.66% , No need to repeat the second time as before. The latter demonstrations all use such writing.

div {
    background: linear-gradient(
                    #e16e5c 33.33%,
                    #edb71e 0 66.66%,
                    #f6e3cd 0);
    background-size: 100% 30px;
}

DEMO: CSS horizontal strips background

Labels: board lattice background, CSS, dots, Geometric background, lattices, stripes