CSS's clever with gradients

This time to bring you the CSS of the clever use of gradients, CSS using gradient considerations, the following is the actual case, to look at.

Objective

This article mainly shares the knowledge about Linear-gradient and radial-gradient in CSS3, and gives you another angle to use the gradient. Interested friends below to see the detailed introduction:

First, linear gradient

Here we need to look at the basic syntax, and then look at the following example.

linear-gradient (90deg, red 20%, blue 50%, yellow 80%);
Obviously, through this picture, you will roughly understand the role of setting these parameters. Although I did not use any words to explain it. (So when you do n’t understand the definition, you must practice.)
Next, we have to do something. We overlap the color separation points.

    width: 300px;
    height: 200px;
    background: linear-gradient (90deg, blue 100px, # fff 100px, # fff 200px, red 200px);
That's right, this is the effect of the above gradient code, does it feel to break your previous impression of gradient.
Below we use linear-gradient to achieve cooler effects, such as:


Do you feel that you have broken through your understanding of gradients? Let me talk about the idea to achieve this background: this is a regular pattern, we have to find its basic pattern, I believe you have found it.
Knowledge points we need to use:

background supports multiple linear-gradient declarations, separated by commas;

When you declare multiple linear-gradients, the first you declare, the closer you are to the user. (Here we need to consider the problem of covering, generally using transparent);

I haven't mastered the shorthand way of background, but it's not good;

Reasonable combination of background-repeat, background-size and background-position.

    width: 410px;
    height: 410px;
    background: linear-gradient (rgb (2,222,222) 10px, transparent 10px) repeat left top / 40px,
                linear-gradient (90deg, rgb (2,222,222) 10px, transparent 10px) repeat left top / 40px;
You see, in the past to achieve this effect, we can only beg for the artist to cut the picture, now in the CSS3 wave, we can be self-sufficient (^ _ ^).
And through the gradient we can achieve the background color animation without the need to consume additional HTML elements to achieve our desired effect. example:


    / *
     * Written in scss here, not very friendly to novices, sorry (-_-)
     * /
    @mixin menuaction ($ color) {
        background: linear-gradient ($ color 100%, transparent 100%) no-repeat center bottom / 100% 10%;
        &: hover {
            background-size: 100% 100%;
            color: #fff;
        }
    }
Second, the radial gradient

Basically, the radial gradient is similar to the linear gradient, except that it spreads outward from the center point. So I will not repeat them here.
Without further ado, first draw a concentric circle:


    border-radius: 50%;
    background: radial-gradient (circle, rgb (22,222,111) 0, rgb (22,222,111) 50px, red 50px, red 100px, rgb (222,222,1) 100px, rgb (222,222,1) 150px, rgb (222,2,111) 150px) ;
In the end, what is the end? Haha recently various coupons, then we use the knowledge of gradients to make a coupon:


The core code is as follows:

    width: 300px;
    height: 120px;
    background: radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (transparent 0, transparent 5px, rgb (247,245,201) 5px) no-repeat,
                radial-gradient (#fff 0, #fff 10px, rgb (247,245,201) 10px) no-repeat,
                radial-gradient (#fff 0, #fff 10px, rgb (247,245,201) 10px) no-repeat,
                linear-gradient (90deg, transparent 10px, rgb (247,245,201) 10px);
            background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%
            background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center;
I believe that you have mastered the method after reading the case of this article. For more exciting, please pay attention to other related articles in php Chinese network!

Recommended reading:

Unpopular CSS properties you didn't know

What is the difference between href and src, link and @import