This article will share the knowledge of Linear-gradient and Radial -gradient in CSS3 and give you another perspective on how to use gradients.

Linear gradient

I’m going to need you to look at the basic syntax here, and then look at the following examples.

    linear-gradient(90deg.red 20%,blue 50%,yellow80%).Copy the code




image

It is clear from this diagram that you can get a general idea of what these parameters are for. Although I don’t have words to explain it. (So practice when you don’t understand the definition.) Next, we’re gonna do something. We overlap the color dividers.

    width: 300px;
    height: 200px;
    background: linear-gradient(90deg.blue 100px.#fff 100px.#fff 200px.red 200px);Copy the code




image

Yes, this is what the gradient code above does, doesn’t it feel like breaking your previous impression of the gradient? Here we use Linear-gradient to achieve something even cooler, such as:





image

Do you feel like you’ve gone beyond your understanding of gradients? Let me give you an idea of how to achieve this background: this is a regular pattern, and we need to find its basic pattern, which I believe you have found. We need to use the following points:

  • Background supports multiple Linear-gradients, separated by commas;
  • When you declare multiple Linear-gradients, the first one, the closer it is to the user. (here we need to consider the problem of covering, generally adopt transparent);
  • I haven’t mastered the shorthand for background yet, but I can’t.
  • A reasonable combination of background-repeat, background-size and background-position.
    width: 410px;
    height: 410px;
    background: linear-gradient(rgb10 (2222222)px.transparent 10px) repeat left top / 40px.linear-gradient(90deg.rgb10 (2222222)px.transparent 10px) repeat left top / 40px;Copy the code

You see, in the past, we had to beg artists to cut images to achieve such an effect, now in the CSS3 wave, we can be self-sufficient (^_^). And with gradients we can animate the background color without consuming additional HTML elements to achieve the desired effect. Example:





image 

    /* * * * SCSS */
    @mixin menuaction($color) {
        background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom100% / 10%; &:hover {
            background-size: 100% 100%;
            color: #fff; }}Copy the code

Radial gradient

A radial gradient is basically the same as a linear gradient, except that it spreads out from the center. So I won’t repeat it here. Without further ado, let’s draw concentric circles:





image 

    border-radius: 50%;
    background: radial-gradient(circle.rgb0 (22222111),rgb50 (22222111)px.red 50px.red 100px.rgb(222222, 1), 100px.rgb(222222, 1), 150px.rgb,2,111 (222) 150px);Copy the code

What will it end up with? Haha, all kinds of coupons these days, let’s use our knowledge of gradients to create a coupon:





image

The core code is as follows:

    width: 300px;
    height: 120px;
    background: radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(transparent 0, transparent 5px.rgb5 (247245201)px) no-repeat.radial-gradient(#fff 0, #fff 10px.rgb10 (247245201)px) no-repeat.radial-gradient(#fff 0, #fff 10px.rgb10 (247245201)px) no-repeat.linear-gradient(90deg.transparent 10px.rgb10 (247245201)px);
            background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px100%, 100%;background-position: -10px 0,-10px 20px.-10px 40px.-10px 60px.-10px 80px.-10px 100px, 60px -30px, 60px 90px.left center;Copy the code

The above code should put size and position in the shorthand property (I won’t change that…). By this point you should have a new understanding of gradients.

If you feel good about it, please pay attention to it. Your attention is my motivation to write. More article simple book source: GitHub