This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

CSS3 has been released for many years now, and there are students who will not change the background, how can I endure? ! Those of you who don’t know how to do it.

CSS3 gradient introduction

CSS3 gradients allow you to show smooth transitions between two or more specified colors.

  • Linear Gradients – Down/up/left/right/diagonal
  • Radial Gradients – defined by their centers

The benefits of using CSS3 to implement a gradient background:

  • Can reduce download time and broadband usage
  • Because gradient is generated by the browser, magnification is not false.

Linear gradient

A gradient in one direction achieved by two or more colors on the right. As shown in figure:

Grammar:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...) ;Copy the code
// Up and down gradient
#grad { background-image: linear-gradient(#e66465, #9198e5); }

// Left and right gradient#grad {background-image: linear-gradient(to right, red , yellow); }// Diagonal gradient#grad {background-image: linear-gradient(to bottom right, red, yellow); }Copy the code

Custom linear gradient Angle

If you want more control over the direction of the gradient, you can define an Angle instead of pre-defining the direction (to bottom, to top, to Right, to left, to Bottom right, etc.).

The Angle is the Angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0DEg will create a gradient from bottom to top and 90deg will create a gradient from left to right.

Note:

However, many browsers (Chrome, Safari, Firefox, etc.) use the old standard where 0DEg creates a left-to-right gradient and 90DEg creates a bottom-to-top gradient. Conversion formula 90-x = y where x is the standard Angle and y is the non-standard Angle.

Example code:

#grad { background-image: linear-gradient(-90deg, red, yellow); }
Copy the code

Repeated linear gradient: repeating-Linear-gradient

#grad { /* Standard syntax */ background-image: repeating-linear-gradient(red, yellow 10%, green 20%); }
Copy the code

Radial gradient

The radial gradient is defined by its center.

To create a radial gradient, you must also define at least two color nodes. Color nodes are the colors that you want to render smooth transitions. You can also specify the center of the gradient, the shape (round or oval), and the size.

grammar

background-image: radial-gradient(shape size at position, start-color, ... , last-color);Copy the code

Properties:

Shape: The shape parameter defines the shape. It can have the following two values:

  • Circle: indicates a circle
  • Ellipse: ellipse. The default value is ellipse.

The shape: size parameter defines the size of the gradient. It can have the following four values:

  • Closest side: Specifies the length of the radial gradient radius from the center to the closest side of the circle
  • Apapel-side: Specifies that the radius of the radial gradient is from the center of the circle to the farthest edge from the center
  • Closest -corner: Specifies the radius of the radial gradient as the Angle closest to the center
  • Apsarp-corner: Specifies that the radius length of the radial gradient is from the center of the circle to the Angle farthest from the center
  • The radius of the radial gradient is from the center of the circle to the point nearest the center. Analogous to the closest – side
  • Cover: specifies that the radius of the radial gradient is from the center of the circle to the point farthest from the center. Similar to the farthest corner

The code examples

(1) Radial gradient with uniform distribution of color nodes:

#grad { background-image: radial-gradient(red, yellow, green); }
Copy the code

(2) Radial gradient with uneven distribution of color nodes:

#grad { background-image: radial-gradient(red 5%, yellow 15%, green 60%)}
Copy the code

(3) Repeated mirror gradient: repeating-radial-gradient

#grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); }
Copy the code