How the SS3 gradient is used

this time to bring you SS3 of how to use the gradient, using the ss3 of the attention of the gradient, the following is the actual case, take a look.

"CSS Secret" This book is very good, full of dry goods and surprises. Here are some notes about the effects of using gradients. Please watch it in the latest modern browser.

The first step is to review the next CSS statement:

Linear-gradient ([[<angle> | To <side-or-corner>],]? <color-stop>[, <color-stop>]+)

This is a linear gradient, and the first parameter is the gradient direction, which is optional. Can be an angle, the value of angle is a degree, such as 45deg,90deg. You can also use to side-or-corner. For example, to left (from right to ieft), to bottom (top to bottom), and the second and third parameters are gradient colors. So the simplest notation can be:

Background:linear-gradient (Aquamarine,orange)

The default is to ramp down from top to bottom. But if we don't want a gradient, we need the color bar. The trick is to not leave a gap between the two colors, because a gradient transition will occur when you leave a gap. So we can set each account to 50%. This 50% represents the color position. It can also be a unit of length.

Background:linear-gradient (Aquamarine 50%,orange 50%)

If we need a variety of colors, such as a blue and white red.

Background:linear-gradient (90deg,aqua 0, Aqua 33%,white 0, white 67%,crimson 0, Crimson)

Note that there are no color labels for the three 0 and final Crimon colors. The first Aqua 0, Aqua 33%, said Aqua accounted for 33%, while the second white one was the Whites 0, while the other one looked 67%, which was actually starting from 67%.

if the position of a color label is smaller than its previous position, the position of the color label is set to the front so the maximum value of the color label position .

So the second 0 represents 33%, and the third 0 represents 67%. You can change 0 to a value less than these two values, and the effect is the same. The last color is automatically populated without a color tag. So if we just want to draw a line, the gradient color can use a transparent color:

Linear-gradient (white 2px, transparent 0)

But if we want to achieve the repetition effect, we also need background-size cooperation. Background-size default is 100% 100%. However, if the size is defined, it is equal to dividing the entire area into a repeating small block.

Grid 1:

. grid {            width:225px;            height:225px;            Background: #58a;            Background-image:linear-gradient (white 2px, transparent 0), linear-gradient (90deg,white 2px,transparent 0);            background-size:75px 75px, 75px, 75px;        }

The first gradient divides the 225px horizontally into three equal halves. Then the second gradient is divided vertically into three equal halves. This is the effect that the naked eye sees, actually is the 9 75px*75px square to spell out the result.

Grid 2:

Background-image:linear-gradient (white 2px, transparent 0), linear-gradient (90deg,white 2px,transparent 0), Linear-gradient (Hsla (0,0%,100%,.3) 1px,transparent 0), linear-gradient (90deg, Hsla (0,0%,100%,.3) 1px,transparent 0); background-size:75px 75px, 75px 75px,15px 15px,15px 15px;

Then this grid implementation is simple. Overlay the gradient again, each 75 divided into 5 15. This effect looks like a tile.

Board

But how do you draw a chessboard? Note that the lines are not coherent. For example, according to the above Background-size idea, we know that such a chessboard is composed of a plurality of such squares.

And the two squares are made up of four triangles . one feature of linear gradients is that there is only one color on a line in the Background-size area .

Background-image:linear-gradient (45deg, #bbb 25%, transparent 0), linear-gradient (45deg, Transparent 75%, #bbb 0), Linear-gradient (45deg, #ffbb33 25%, transparent 0), linear-gradient (45deg, Transparent 75%, #ffbb33 0); Background-size: 30px 30px;background-position:0 0, 15px 15px,15px 15px, 30px 30px;

Notice that a set of background-position is also used, the first #bbb color is 45 degrees in the direction of 25%, and the second #bbb color is 45 degrees in the direction of the last 25%. If you change the second triangle to red, then the position starts at 0 and 0 at a glance.

Background-image:linear-gradient (45deg, #bbb 25%, transparent 0), linear-gradient (45deg, transparent 75%,red 0); background-size:30px 30px; background-position:0 0, 0px 0px,15px 15px, 30px 30px;

Change the red triangle position to 15px,15px to form a square. Similarly, a square is superimposed to get the format of the chessboard. In the same vein, we can put together a resting lattice.

Let the triangle turn 90 degrees at a time without having to move the position.

Background-image:linear-gradient (45deg, red 0, Red 25%,transparent 0), linear-gradient (135deg, Orange 0, Orange 25%,tran Sparent 0), linear-gradient (225deg, yellow 0, Yellow 25%,transparent 0), linear-gradient (315deg, Green 0, Green 25%, Transparent 0)

Diagonal grid

With the accumulation above, it is simple to draw a diagonal lattice:

Background-image:linear-gradient (45deg,transparent 49%, black 0,black 51%, transparent 0), linear-gradient (135deg, Transparent 49%, black 0,black 51%, transparent 0); background-size:30px 30px;

The equivalent is two diagonal lines per unit gradient.

Diagonal lattice

Always go to fight this unit may make you a little annoyed, so came out repeating-linear-gradient.

Background:repeating-linear-gradient (45deg, transparent, transparent 1em, Moccasin 0, Moccasin 2em, transparent 0, trans Parent 3em, Powderblue 0, Powderblue 4em, transparent 0, transparent 5em, Lavender 0, Lavender 6em, transparent 0, Transpa Rent 7em, beige 0, Beige 8em), repeating-linear-gradient ( -45deg, transparent, transparent 1em, khaki 0, khaki 2em, TRANSP Arent 0, Transparent 3em, beige 0, beige 4em, transparent 0, transparent 5em, Peachpuff 0, Peachpuff 6em);

Notice that the colors appear in pairs. This will show us the color bar. Note that the background-blend-mode:multiply is used here ; Mixed mode. Otherwise the effect is not so good.

Polka Dots:

The idea is the same as above, using the radial gradient overlay and dislocation

Background-image:radial-gradient (#fff 5px,transparent 0), radial-gradient (#fff 10px, transparent 0); background-size:40px; background-position:0 0, 20px 20px;

Sofa

Sofa This effect is more complex, using a radial gradient to make dots and shadows, linear gradient to outline the line.

 Background:radial-gradient (HSL (0, 100%, 27%) 4%, HSL (0, 100%, 18%) 9%, Hsla (0, 100%, 20%, 0) 9%) 0 0, Radial-gradient (HSL (0, 100%, 27%) 4%, HSL (0, 100%, 18%) 8%, Hsla (0, 100%, 20%, 0) 10%) 50px 50px, Radial-gradient (Hsla (0, 100%, 30%, 0.8) 20%, Hsla (0, 100%, 20%, 0)) 50px 0, Radia L-gradient (Hsla (0, 100%, 30%, 0.8) 20%, Hsla (0, 100%, 20%, 0)) 0 50px, radial-gradient (Hsla (0, 100%, 20%, 1 ) 35%, Hsla (0, 100%, 20%, 0) 60%) 50px 0, Radial-gradient (Hsla (0, 100%, 20%, 1) 35%, Hsla (0, 100%, 20%, 0) 60%) 100px 50px, Radial-gradient (Hsla (0, 100%, 15%, 0.7), Hsla (0, 100%, 20%, 0)) 0 0, Radial-grad  Ient (Hsla (0, 100%, 15%, 0.7), Hsla (0, 100%, 20%, 0)) 50px 50px, Linear-gradient (45deg, Hsla (0, 100%, 20%, 0) 49%, Hsla (0, 100%, 0, 1) 50%, Hsla (0, 100%, 20%, 0) 70%) 0 0, Linear-gradient ( -45deg, Hsla (0, 100%, 20%, 0) 49%, hsla (0, 100%, 0, 1) 50%, Hsla (0, 100%, 20%, 0) 70% ) 00; Background-color: #300; background-size:100px 100px;

Radial-gradient Syntax:

Radial-gradient ([  [Circle | | <length>]                         [at <position>]? |    [Ellipse | | [<length> | <percentage>] {2}]  [at <position>]?, |    [[Circle | ellipse] | | <extent-keyword>]   [At <position>]? , |    At <position>,  ]?  <color-stop> [, <color-stop>]+)

Looks a bit complicated, [] denotes a parameter, []? indicates that this parameter is optional, | Indicates that the two parameters two are selected one, | | Indicates that both parameters can exist at the same time, ', ' indicates the end of this parameter. Contains shapes, center point locations, extension keywords, and colors. The shape is rounded (circle) and oval (ellipse), the position can be length/percent/abbreviated left, center, etc. The same color as a linear gradient, such as a gradient of a sun:

Background:radial-gradient (at 45px 45px,rgb (248, 242, 209), gold, #FFF);

But at this point, the at affects not only the center of the gradient but also the shape of the gradient . If we add background-size we can get a cookie: Want to eat (* ^^ *) ...

And the extension keyword mainly has the following several situations

Closest-side: Specifies the radius length of the radial gradient from the center to the nearest edge from the center point

Background:radial-gradient (Circle Closest-side, Aqua,gold);

Closest-corner: Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

Background:radial-gradient (Circle Closest-corner  , aqua,gold);

Farthest-side: Specifies the radius length of the radial gradient from the center to the edge farthest from the center

Background:radial-gradient (Circle farthest-side at 30% 30%  , aqua,gold);

Farthest-corner: Specifies the radius length of the radial gradient from the center to the point farthest from the center

Background:radial-gradient (Circle Farthest-corner at 30% 30%  , aqua,gold);

If we want to draw a good circle, this will use the technique of linear gradient.

Background:radial-gradient (white 0,white 10%,red 0, Red 20%,white 0,white 30%,red 0,red 40%,white 0,white 50%,red 0,red 60 %,white 0,white 100%);

Summary: These effects are quite interesting, this article is mainly learning linear-gradient,repeating-linear-gradient and background-size, background-position to achieve grid effect, Finally, the use of radial-gradient, radial gradient of more patterns, all the effect is based on gradient overlay and repetition, more effects can refer to the following links.

Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Promise in JQuery, Angular, and node

H5 Video Player Library Video.js detailed