The C3 gradient mainly shows a smooth transition between two or more specified colors.

In the past, we needed images to achieve this effect. Now, we use c3 gradients to reduce download time and broadband usage, and mainly to make element enlargement more beautiful, since the gradients are generated by the browser.

C3 defines two types of gradient, a linear gradient and a radial gradient.

Linear gradients are mostly down/up/left or right diagonal gradients.

Radial gradients are mainly defined by their center. Let’s talk about linear gradients. \

Linear gradient format:

Background: Linear-gradient (direction, color-stop1, color-stop2,..) ;Copy the code

Linear gradient from top to bottom This is the default. The main format is:

Background: Linear-gradient (colorstop1, colorstop2);Copy the code

The linear gradient from left to right is:

Background: Linear-gradient (to end-direction, colorstop1, colorstop2);Copy the code

Linear gradient diagonal type. This type makes a diagonal gradient by specifying the starting position of the horizontal and vertical. Let’s do an example of a diagonal gradient from the top left to the bottom right. Pay attention to code changes.

Background: -webkit-Linear-gradient (left top, red, blue); Background: -O-Linear-gradient (left, red, blue); Background: -Moz-Linear-gradient (Right bottom, red, blue); Background: Linear-gradient (to right bottom, red, blue);Copy the code

We use an Angle to represent the gradient. Let’s start with an Angle. An Angle is the Angle between the horizontal line and the gradient, calculated counterclockwise. In short, 0deg creates a top to bottom gradient, and 90deg creates a left to right gradient.

We do a small example, the realization of the div rectangle from lower left to upper right, brown to gray gradient, today just accompany girlfriend to dye my hair (chestnut brown), checked on the Internet, can’t find the chestnut brown, then asked the barber, barber, brown and grey and blue, gray blue small, ha ha ha, said a heap of, to start.

<style>    .lzr{      width: 200px;      height: 200px;      background: -webkit-linear-gradient(left bottom,brown,gray);      background: -moz-linear-gradient(red top,brown,gray);      background: -o-linear-gradient(right top,brown,gray);      background: linear-gradient(to right top,brown,gray);    }  </style> </head>
 <body>   <div class="lzr"></div> </body>
Copy the code

Now let’s talk about radial gradient. The syntax is:

Background: radial-gradient (Center, shape size, start-color,... And last, color);Copy the code

The radial gradient is defined by its center.

We need at least two color nodes in order to achieve a radial gradient. The color node is the color that you want to show a smooth transition, and you can also specify the gradient center, shape, or size. By default, the center is the center, which is usually an ellipse, and the size is usually the farthest corner.

Let’s try radial gradients with three colors.

background:radial-gradient(brown,gray,blue);
Copy the code

Today we finish school, we digest digest, if there is insufficient place, also hope big guy supplement. I will update it in time. Tomorrow we’re going to look at Transform, and we’re going to prefix this one for different browsers.

Finally, let’s meet, my name is Lu Hungrui, share web development knowledge and learning experience, follow me, you can have a qualitative leap. \

I have prepared a lot of learning materials for you, on the homepage of the official account: Reply [receiving welfare], I prepared a lot of learning materials for you, such as PPT, Python actual combat, web basic learning, native JS effects, CSS effects, etc. Reply [into group exchange learning], add assistant wechat, assistant will pull you into the group, there are many public number owners, school teachers, web developers, Do not know can send group, we discuss learning together. We met at the front of the Web, and we are going to be the best teachers for each other on web improvement. Thank you for your attention!!