22nd Chapter CSS3 Gradient Effect

Learning Essentials:

1. Linear gradient

2. Radial gradient

Keynote Teacher: Li Tinghui

This chapter mainly discusses the CSS3 background gradient function in HTML5, there are two main gradient modes: linear gradient and radial (radioactive) gradient.

A Linear gradient

CSS3 provides a gradient feature for the Linear-gradient property to implement the background color. In the past, this effect had to be done with pictures. First, let's take a look at its style sheet, as follows:

	Linear-gradient (azimuth, start color, end color)
Position	Optional parameter, orientation of the gradient. The values that can be used are: to top, to-top right, to-right, to-bottom, to-bottom left, to-left, to-top left.
Start color	Required parameters, color values
End Color	Required parameters, color values

Two Required parameters

Background-image:linear-gradient (Orange,green);

Add a position

Background-image:linear-gradient (to Top,orange,green);

The gradient direction achieved through the four groups of top, left, right, and bottom is sometimes relatively single, and we can use values in angular units to set the orientation. For example, 0 degrees (0deg) is equivalent to top, and the angle increases counterclockwise as your angle increases.

Set azimuth by angle, between 0 and 360 degrees, can be negative

background-image:linear-gradient (45deg,orange,green);  

Multi-color linear gradient

Background-image:linear-gradient ( -45deg,orange,green,blue,red);

Set multi-color linear position by percent

Background-image:linear-gradient ( -45deg, Orange 0, Green 20%, Blue 40%, Red 100%);

By default: The percentage position of the starting color is 0%, the percentage of the end color is 100%, and the other locations are assigned by average. You can also use px pixels to set, but calculate the trouble points.

Combine backgrounds and use transparent gradients for a strong sense of layering

Background-image:linear-gradient (to top right, Rgba (0,0,0,0.6), Rgba (0,0,0,0));

Repeating Gradient property values

Background-image:repeating-linear-gradient (to top, orange 10px, green 30px);

The latest mainstream browsers support CSS3 's gradient properties, so what is the support level for previous browsers? You can refer to the following table:

	Opera	Firefox	Chrome		Safari	Ie
Partial support with prefix required	11.5	No	4	~ 9	4 ~ 5	No
Support with prefix required	No	3.6 ~ 15	10	~ 25	5.1 ~ 6	No
Support without prefixes	12.1+	16+		26+	6.1+	10.0+

Some support is mentioned here, stating that it is possible that the gradient is not yet complete, but you can use it by adding a prefix. Specific which is not perfect, has been unable to verify, the version is too long. Then the full format with prefix and unsupported prefix is supported as follows:

Plus compatible prefixes

Background-image:-webkit-linear-gradient (to top, orange, green); Background-image:-moz-linear-gradient (to top, orange, green); Background-image:-o-linear-gradient (to top, orange, green); Background-image:linear-gradient (to top, orange, green);

Repeating-linear-gradient property value and Linear-gradient are basically the same, not repeat.

Two Radial gradient

CSS3 provides a radial gradient, also known as a radioactive gradient: the Radial-gradient property value. It expands in a way that radiates from one point to the other. The property value style sheet is as follows:

Radial-gradient (azimuth, start color, end color)
Position	Optional parameters, radial orientation. The values you can use are: pixels, percentages, fixed values, or combinations with
Start color	Required parameters, color values
End Color	Required parameters, color values

Two Required parameters

Background-image:radial-gradient (orange, green);

If you want to set the first optional parameter, one of the practices is set to: Cirlce (round) or ellipse (oval). The default is ellipse.

Background-image:radial-gradient (Circle, Orange, green);

Shape	Description
Circle	Circular
Ellipse	Ellipse, default value

Not only can you set the shape, you can also set the divergence direction of the shape

Background-image:radial-gradient (circle at top, orange, green);  

Direction	Description
Top	Diverging from the top of the
Left	Diverging from the left
Right	Diverging from right
Bottom	Diverging from the bottom
Center	Divergence from the middle

You can also compound the direction, such as the lower right

Background-image:radial-gradient (circle at right bottom, orange, green);

You can set the divergence distance, which is the radius length of the circle

Background-image:radial-gradient (Circle Closest-side, Orange, green);

Radius keyword	Description
Closest-side	Specifies that the radial gradient has a radius length from the center to the nearest edge of the center
Closest-corner	Specifies the radius length of the radial gradient from the center to the nearest corner from the center point
Farthest-side	Specifies the radius length of the radial gradient from the center to the edge farthest from the center
Farthest-corner	Specifies the radius length of the radial gradient from the center to the point farthest from the center

Keywords have a bit of a mouthful, you can use pixels to represent radii, but not percent

Background-image:radial-gradient (Circle 50px, Orange, green);

Similarly, there are repeated background patterns

Background-image:repeating-radial-gradient (Circle 50px, Orange, green);

Compatibility mode

Background-image:-webkit-radial-gradient (Circle, Orange, green); Background-image:-moz-radial-gradient (Circle, Orange, green); Background-image:-o-radial-gradient (Circle, Orange, green); Background-image:radial-gradient (Circle, Orange, green);

Two repeating backgrounds just add the prefix to compatibility mode.

Background-image:-webkit-repeating-radial-gradient; Background-image:-moz-repeating-radial-gradient;background-image:-o-repeating-radial-gradient;background-image : repeating-radial-gradient;

22nd Chapter CSS3 Gradient Effect