Look at the gradient from another angle

This article mainly introduces the CSS gradient in the relevant information, the main share CSS3 linear-gradient and radial-gradient knowledge, bring you to use another angle of the gradient, the text through the sample code introduced in very detailed, the need for friends can refer to the following

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 diagram, you will probably understand the role of setting these parameters. Although I did not use any words to explain it. (So when you don't understand the definition, be sure to practice it.) ）
Next, we're going to do something. We overlap the color dividers.

    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, is not feeling to break your previous impression of the gradient.

Below we use linear-gradient to achieve cooler results, such as:

is not feeling has broken through their own understanding of the gradient. Let me take a look at this background: this is a regular pattern, we have to find its basic pattern, I believe you have found.

We need to use the knowledge points:

• Background supports declaring multiple linear-gradient, separated by commas;

• When you declare multiple linear-gradient that are first declared, the closer you are to the user. (Here we need to consider the problem of covering, generally use transparent);

• Have not mastered the short way of background, but not the OH;

• Rational 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 such an effect, we can only beg the art of drawing, now in the wave of CSS3, we can self-sufficiency (^_^).

And by using gradients we can animate the background color without having to consume extra HTML elements to achieve our desired effect. Example:

         /* *  written here with Scss, not very friendly to the novice, sorry (-_-) *    /@mixin menuaction ($color) {        background:linear-gradient ($ Color 100%, transparent 100%) no-repeat Center bottom/100% 10%;        &:hover {            background-size:100% 100%;            Color: #fff;        }    }

Two, radial gradient

Basically, a radial gradient is almost the same as a linear gradient, except that it spreads outward from the center point. So I'm not going to repeat it here.

Don't say much, draw a concentric circle first:

    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);

Finally to what end, haha recently various coupons, then we use gradient knowledge to get a coupon it:

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-gradien T (transparent 0, transparent 5px, RGB (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, Transpare NT 5px, RGB (247,245,201) 5px) no-repeat, radial-gradient (transparent 0, transparent 5px, RGB (247,245,201) 5                px) 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; 

The above code should put size and position in the shorthand attribute (I will not change ...) You should have a new understanding of the gradient.