Explore CSS3 gradients (gradients)

The CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.

Previously, you had to use images to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce the use of downloaded events and broadband. In addition, the elements of the gradient effect look better when zoomed in, because the gradient (gradient) is generated by the browser.

CSS3 defines two types of gradients (gradients):

Linear gradient (Linear gradients)-down/up/left/right/diagonal

Radial gradients (Radial gradients)-defined by their centers

Browser support

The number in the table specifies the first browser version that fully supports the property.

The number following the-webkit-、-moz-or-o-specifies that the first version of the attribute needs to be prefixed to support a property.

CSS3 linear Gradient

To create a linear gradient, you must define at least two color nodes. The color node is the color in which you want to render a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

Examples of linear gradients:

Grammar

Background:linear-gradient (direction, COLOR-STOP1, COLOR-STOP2, ...);

Linear gradient-top to bottom (by default)

The following instance starts with a linear gradient from the top. The starting point is red and slowly transitions to blue:

A linear gradient from top to bottom:

#grad {  background:-webkit-linear-gradient (red, blue),/* Safari 5.1-6.0 */  background:-o-linear-gradient ( Red, blue); /* Opera 11.1-12.0 *  /background:-moz-linear-gradient (red, blue);/* Firefox 3.6-15 */  Background:linear-gra Dient (red, blue); /* Standard syntax */}

Linear gradient-from left to right

The following example shows a linear gradient starting from the left. The starting point is red and slowly transitions to blue:

Instance

Left-to-right linear gradient:

#grad {  background:-webkit-linear-gradient (left, red, blue);/* Safari 5.1-6.0 */  background:-o-linear-gradie NT (right, red, blue); /* Opera 11.1-12.0 *  /background:-moz-linear-gradient (right, red, blue);/* Firefox 3.6-15 */  Background:lin Ear-gradient (to right, red, blue); /* Standard syntax */}

Linear gradient-Diagonal

You can create a diagonal gradient by specifying the starting position of the horizontal and vertical.

The following example shows a linear gradient starting from the upper-left corner (to the lower-right corner). The starting point is red and slowly transitions to blue:

Instance

A linear gradient from the upper-left to the lower-right corner:

#grad {  background:-webkit-linear-gradient (left Top, red, blue);/* Safari 5.1-6.0 */  background:-O-LINEAR-GR Adient (bottom right, red, blue); /* Opera 11.1-12.0 *  /background:-moz-linear-gradient (bottom right, red, blue);/* Firefox 3.6-15 */  Backgrou Nd:linear-gradient (to bottom right, red, blue); /* Standard syntax */}

Use angle

If you want to do more control in the direction of the gradient, you can define an angle instead of the predefined direction (to bottom, to top, to right, to left, to bottom right, and so on).

Grammar

Background:linear-gradient (angle, COLOR-STOP1, COLOR-STOP2);

The angle is the angle between the horizontal and the gradient lines, which is calculated in the counterclockwise direction. In other words, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right.

However, please note that many browsers (CHROME,SAFARI,FIEFOX, etc.) use the old standard, i.e. 0deg will create a left-to-right gradient, and 90deg will create a gradient from bottom to top. Conversion formula 90-x = y where x is the standard angle and y is a non-standard angle.

The following example shows how to use an angle on a linear gradient:

Instance

A linear gradient with the specified angle:

#grad {  background:-webkit-linear-gradient (180deg, red, blue);/* Safari 5.1-6.0 */  background:-o-linear-grad Ient (180deg, red, blue); /* Opera 11.1-12.0 *  /background:-moz-linear-gradient (180deg, red, blue);/* Firefox 3.6-15 */  Background:li Near-gradient (180deg, red, blue); /* Standard syntax */}

Use multiple color nodes

The following example shows how to set multiple color nodes:

Instance

Top-to-bottom linear gradient with multiple color nodes:

#grad {  background:-webkit-linear-gradient (red, green, blue);/* Safari 5.1-6.0 */  background:-o-linear-gradi ENT (red, green, blue); /* Opera 11.1-12.0 *  /background:-moz-linear-gradient (red, green, blue);/* Firefox 3.6-15 */  Background:lin Ear-gradient (red, green, blue); /* Standard syntax */}

The following example shows how to create a linear gradient with a rainbow color and text:

Instance

#grad {  /* Safari 5.1-6.0 *  /background:-webkit-linear-gradient (Left,red,orange,yellow,green,blue,indigo, Violet);  /* Opera 11.1-12.0 *  /background:-o-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet);  /* Firefox 3.6-15 *  /background:-moz-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet);  /* Standard syntax *  /background:linear-gradient (to right, red,orange,yellow,green,blue,indigo,violet);}

Use transparency (transparent)

CSS3 gradients also support transparency (transparent), which can be used to create effects that weaken the fade.

To add transparency, we use the RGBA () function to define the color nodes. The last parameter in the RGBA () function can be a value from 0 to 1, which defines the transparency of the color: 0 is fully transparent, and 1 is completely opaque.

The following example shows a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to a completely opaque red:

Instance

Left-to-right linear gradient with transparency:

#grad {  background:-webkit-linear-gradient (Left,rgba (255,0,0,0), Rgba (255,0,0,1));/* Safari 5.1-6 *  / Background:-o-linear-gradient (Right,rgba (255,0,0,0), Rgba (255,0,0,1)); /* Opera 11.1-12*/  background:-moz-linear-gradient (Right,rgba (255,0,0,0), Rgba (255,0,0,1));/* Firefox 3.6-15*/< C3/>background:linear-gradient (To-right, Rgba (255,0,0,0), Rgba (255,0,0,1)); /* Standard syntax */}

Repeating linear gradients

The Repeating-linear-gradient () function is used to repeat a linear gradient:

Instance

A repeating linear gradient:

#grad {  /* Safari 5.1-6.0 *  /background:-webkit-repeating-linear-gradient (red, yellow 10%, Green 20%);  /* Opera 11.1-12.0 *  /background:-o-repeating-linear-gradient (red, yellow 10%, Green 20%);  /* Firefox 3.6-15 *  /background:-moz-repeating-linear-gradient (red, yellow 10%, Green 20%);  /* Standard syntax *  /background:repeating-linear-gradient (red, yellow 10%, Green 20%);}

CSS3 Radial Gradient

A radial gradient is defined by its center.

To create a radial gradient, you must also define at least two color nodes. The color node is the color in which you want to render a smooth transition. You can also specify the center of the gradient, the shape (prototype or ellipse), and the size. By default, the centre of the gradient is center (represented by the center point), the shape of the gradient is ellipse (the ellipse is represented), and the gradient is Farthest-corner (indicated to the farthest corner).

Examples of radial gradients:

Grammar

Background:radial-gradient (center, shape size, Start-color, ..., last-color);

Radial gradient-uniform distribution of color nodes (by default)

Instance

Radial gradient with uniform distribution of color nodes:

#grad {  background:-webkit-radial-gradient (red, green, blue);/* Safari 5.1-6.0 */  background:-o-radial-gradi ENT (red, green, blue); /* Opera 11.6-12.0 *  /background:-moz-radial-gradient (red, green, blue);/* Firefox 3.6-15 */  Background:rad Ial-gradient (red, green, blue); /* Standard syntax */}

Radial gradient-uneven distribution of color nodes

Instance

Radial gradient with uneven distribution of color nodes:

#grad {  background:-webkit-radial-gradient (red 5, Green 15%, Blue 60%);/* Safari 5.1-6.0 */  background:-o-ra Dial-gradient (Red 5, Green 15%, Blue 60%);/* Opera 11.6-12.0 */  background:-moz-radial-gradient (red 5, Green 15% , Blue 60%); /* Firefox 3.6-15 *  /background:radial-gradient (red 5, Green 15%, Blue 60%);/* Standard syntax */}

Set shape

The shape parameter defines the shapes. It can be a value of circle or ellipse. where circle represents a circle and ellipse represents an ellipse. The default value is ellipse.

Instance

Radial gradient with rounded shape:

#grad {  background:-webkit-radial-gradient (circle, red, yellow, green);/* Safari 5.1-6.0 */  background:-o-rad Ial-gradient (circle, red, yellow, green); /* Opera 11.6-12.0 *  /background:-moz-radial-gradient (circle, red, yellow, green);/* Firefox 3.6-15 */  BACKG Round:radial-gradient (circle, red, yellow, green); /* Standard syntax */}

Use of different size and size keywords

The size parameter defines the scale of the gradient. It can be the following four values:

C

Losest-sidefarthest-sideclosest-cornerfarthest-corner

Instance

Radial gradients with different size and size keywords:

 #grad1 {/* Safari 5.1-6.0 */background:-webkit-radial-gradient (60% 55%, close   St-side,blue,green,yellow,black);  /* Opera 11.6-12.0 */background:-o-radial-gradient (60% 55%, closest-side,blue,green,yellow,black);  /* Firefox 3.6-15 */background:-moz-radial-gradient (60% 55%, closest-side,blue,green,yellow,black); /* Standard syntax */background:radial-gradient (60% 55%, closest-side,blue,green,yellow,black);}  #grad2 {/* Safari 5.1-6.0 */background:-webkit-radial-gradient (60% 55%, farthest-side,blue,green,yellow,black);  /* Opera 11.6-12.0 */background:-o-radial-gradient (60% 55%, farthest-side,blue,green,yellow,black);  /* Firefox 3.6-15 */background:-moz-radial-gradient (60% 55%, farthest-side,blue,green,yellow,black); /* Standard syntax */background:radial-gradient (60% 55%, farthest-side,blue,green,yellow,black);} 

Repeating radial gradient

The Repeating-radial-gradient () function is used to repeat a radial gradient:

Instance

A repeating radial gradient:

#grad {  /* Safari 5.1-6.0 *  /background:-webkit-repeating-radial-gradient (red, yellow 10%, Green 15%);  /* Opera 11.6-12.0 *  /background:-o-repeating-radial-gradient (red, yellow 10%, Green 15%);  /* Firefox 3.6-15 *  /background:-moz-repeating-radial-gradient (red, yellow 10%, Green 15%);  /* Standard syntax *  /background:repeating-radial-gradient (red, yellow 10%, Green 15%);}

"Recommended"

1. Special recommendation : "PHP Programmer Toolkit" V0.1 version download

2. Free CSS Online video tutorial

3. php.cn Lonely Nine-base (2)-css video tutorial

4. Multi-browser-compatible gradient notation