This is the 12th day of my participation in the August More Text Challenge. For details, see: August More Text Challenge

One function that CSS gradients cannot escape is linear gradient

MDN official document: developer.mozilla.org/zh-CN/docs/…

Linear-gradient is defined as:

linear-gradient(
  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
  \---------------------------------/ \----------------------------/
    Definition of the gradient line        List of color stops

where <side-or-corner> = [ left | right ] || [ top | bottom ]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ] #, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1.2}
  and <color-hint> = [ <percentage> | <length> ]
Copy the code

The meaning seems complicated.

For example, including Angle gradient direction, from top to bottom gradient, or from left to right gradient, or a certain Angle gradient.

The color-stop-list defines gradient nodes.

Let’s look at a few examples.

Basic framework code:

<! DOCTYPEhtml>

<body>
    <div class="my-box"></div>
</body>

<style>
    .my-box {
        width: 300px;
        height: 300px;
        /* background: linear-gradient(#fb3, #58a); * /
    }
</style>

</html>
Copy the code
  1. Use color only:
background: linear-gradient(#fb3.#58a);
Copy the code

The effect is as follows:

  1. Specify gradient node

    As shown in the code below, we define four gradient nodes, the second of which is the same color as the third gradient node.

background: linear-gradient(#fb3 10%.#58a 50%.#58a 60%, red 80%);
Copy the code

The display effect is as follows:

  1. Specify gradient direction

    Let’s add the gradient direction, and first try the Angle problem:

    background: linear-gradient(45deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
Copy the code

    The display looks like this, where you can see that 45deg starts in the lower left corner. But where exactly did 45deg come from?

    Try another Angle, or let’s animate it and see:

    <! DOCTYPEhtml>

<body>
    <div class="my-box"></div>
</body>

<style>
    .my-box {
        width: 300px;
        height: 300px;
        background: linear-gradient(0deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        animation: change 3s infinite;
    }
    @keyframes change {
        from {
            background: linear-gradient(0deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        }
        25% {
            background: linear-gradient(11.25 deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        }
        50% {
            background: linear-gradient(22.5 deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        }
        75% {
            background: linear-gradient(33.75 deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        }
        to {
            background: linear-gradient(45deg.#fb3 10%.#58a 50%.#58a 60%, red 80%);
        }
    }
</style>

</html>
Copy the code

    The animation looks like this:

    You can see that the direction of transformation starts from the “bottom to top” direction and rotates clockwise about 45deg from the center of the assembly.

    The feature of Linear-gradient can be used to create many interesting background colors or styles, such as stripes and so on. CSS Revealed details how to use this property for stripes and more complex background patterns.