Are gradients new to css3?

Gradient is a new image type in css3, used to replace images. CSS3 defines two types of gradients: 1. Linear gradient, defined using the "linear-gradient()" function; 2. Radial gradient, defined using the "radial-gradient()" function.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

As a new attribute of CSS3, gradients also have endless potential.

1. Introduction

 Gradient is a new image type in CSS3, which is used to replace images. Its benefits are:

• Speed ​​up page loading Speed, reducing bandwidth usage;

• More flexible.

CSS3 defines two types of gradients:

• Linear Gradients - Down/Up/Left /Right/Diagonal direction

• Radial Gradient (Radial Gradient) - defined by their center

2. Linear Gradient

  In fact, the use of gradients is quite common, such as navigation bars:

  Obviously, this looks much better than a solid color background.

 Of course, sometimes we don’t need transition effects:

## # For linear gradients, in addition to linear-gradient, there are also repeating-linear-gradient:

 Hence It can be seen that gradient is not that simple.

 Some people must ask here, what other tricks can be played? First of all, we need to understand that gradient is a kind of picture, then think about what other CSS properties are used with pictures?

 Through this example, the idea of ​​using gradients becomes more open. However, there is one more thing to note here:

When you declare multiple gradients, the one declared first is closer to the user. (Here we need to consider the issue of covering, generally using transparent);

 Similarly, gradients can also be animated

3. Radial gradient

radial A gradient is defined by its center.

In order to create a radial gradient, you must also define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also specify the center, shape (circle or oval), and size of the gradient. By default, the center of the gradient is center (meaning at the center point), the shape of the gradient is ellipse (meaning an ellipse), and the size of the gradient is farthest-corner (meaning to the farthest corner).

Syntax

ValueDescriptionshape Determine the type of circle:sizeDefine the size of the gradient, possible values: positiondefines the position of the gradient. Possible values: start-color, ..., last-color is used to specify the starting and ending colors of the gradient.

	ellipse (default): Specifies the radial gradient of the ellipse. circle: Specify the radial gradient of the circle
	farthest-corner (default): specifies the radius length of the radial gradient from the center of the circle to the corner farthest from the center closest-side: specifies the radius length of the radial gradient from the center of the circle to the corner farthest from the center The side closest to the center of the circle closest-corner: Specifies the radius length of the radial gradient from the center of the circle to the corner closest to the center of the circle farthest-side: Specifies the radius length of the radial gradient from the center of the circle To the edge farthest from the center of the circle
	center (default): Set the middle ordinate value of the center of the radial gradient circle. top: Set the top to the ordinate value of the center of the radial gradient circle. bottom: Set the bottom to the ordinate value of the center of the radial gradient circle.

Example:

4. Summary

What will it end with, haha ​​Recently Various coupons, let’s use the knowledge of gradients to get a coupon:

(Learning video sharing:

css video tutorial)

The above is the detailed content of Are gradients new to css3?. For more information, please follow other related articles on the PHP Chinese website!