CSS3 background gradient attributes linear-gradient (linear gradient) and radial-gradient (radial gradient)

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-Gradient (radial gradient ).


To better apply CSS3 Gradient, we need to first understand the current kernels of several modern browsers,
Mainstream content includes Mozilla (familiar browsers such as Firefox and Flock), WebKit (familiar browsers such as Safari and Chrome), Opera (operabrowser), and Trident (annoying IE browser ).
This article ignores IE as usual. We mainly look at the applications in Mozilla, Webkit, and Opera. Of course, it can also be implemented in IE. It needs to be implemented through the unique filter of IE, the filter usage syntax will be listed later, but it will not detail how to use it. If you are interested, you can search for related technical documents.


CSS3 linear gradient


1. Application of Linear Gradient in Mozilla


Syntax:


-Moz-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>] *)
 


Parameters: There are three parameters in total. The first parameter indicates the direction of the linear gradient. top is from top to bottom and left is from left to right. If it is defined as left top, that is, from the upper left corner to the lower right corner. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors.


Based on the above introduction, let's take a simple example:

HTML:

<Div class = "example example1"> </div>
 

CSS:

. Example {
Width: 150px;
Height: 80px;
}


(Unless otherwise stated, the following examples use the basic html and css code)


Now we apply a simple gradient style to this div:


. Example1 {
Background:-moz-linear-gradient (top, # ccc, #000 );
}

Note: This effect can be displayed only in the Mozilla kernel browser.


II. Application of Linear Gradient in Webkit


Syntax:


-Webkit-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>] *) // the latest release syntax.


Parameter:-webkit-gradient is the implementation parameter of the webkit engine for gradient. There are five parameters in total. The first parameter indicates the gradient type (type), which can be linear (linear gradient) or radial (radial gradient ). The second and third parameters are both a pair of values, indicating the gradient start point and end point respectively. These values can be expressed in coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner ). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters. The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient. :


Statement:

-Webkit-linear-gradient (top, # ccc, #000 );
 

I will not post this effect, and everyone will understand it in the browser, whether they are consistent. By careful comparison, the two learning methods in Mozilla and Webkit are basically the same, but they only differ in their prefixes. Of course, when can they be unified into the same one, it is certainly better for us, you don't have to deal with it. It will greatly save our development time.


Iii. Application of Linear Gradient in Opera


Syntax:


-O-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>]);/* Opera 11.10 + */
 


-O-linear-gradient has three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from top left to bottom right. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors. (Note: The versions supported by Opera are limited. This test is in Opera11.1 and will not be prompted later ),:

Example:


Background:-o-linear-gradient (top, # ccc, #000 );
 


Iv. Application of Linear Gradient in Trident (IE)


Syntax:


Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = # 1471da, endColorstr = # 1C85FB);/* IE <9> */
-Ms-filter: "progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = # 1471da, endColorstr = # 1C85FB)";/* IE8 + */
 


IE uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color. GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient. :



1. Starting from center (horizontal direction) and top (vertical direction), that is, Top → Bottom:


/* Firefox 3.6 + */
Background:-moz-linear-gradient (top, # ace, # f96 );
/* Safari 4-5, Chrome 1-9 */
/*-Webkit-gradient (, [,]?, [,]? [,] *) */
Background:-webkit-gradient (linear, top, from (# ace), to (# f96 ));
/* Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (top, # ace, # f96 );
/* Operators' 11.10 + */
Background:-o-linear-gradient (top, # ace, # f96 );
 

2. Start with left (horizontal direction) and center (vertical direction). Left → Right:


/* Firefox 3.6 + */
Background:-moz-linear-gradient (left, # ace, # f96 );
/* Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (left, # ace, # f96 );
/* Operators' 11.10 + */
Background:-o-linear-gradient (left, # ace, # f96 );
 

3. Start with left (horizontal direction) and top (vertical direction ):


Background:-moz-linear-gradient (left top, # ace, # f96 );
Background:-webkit-linear-gradient (left top, # ace, # f96 );
Background:-o-linear-gradient (left top, # ace, # f96 );
 

4. Linear Gradient (with Even Stops ):


/* Firefox 3.6 + */
Background:-moz-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );
/* Safari 4-5, Chrome 1-9 */
Background:-webkit-gradient (linear, left top, right top, from (# ace), color-stop (0.25, # f96), color-stop (0.5, # ace), color-stop (0.75, # f96), to (# ace ));
/* Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );
/* Operators' 11.10 + */
Background:-o-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );


5. with Specified Arbitrary Stops:


/* Firefox 3.6 + */
Background:-moz-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );
/* Safari 4-5, Chrome 1-9 */
Background:-webkit-gradient (linear, left top, right top, from (# ace), color-stop (0.05, # f96), color-stop (0.5, # ace), color-stop (0.95, # f96), to (# ace ));
/* Safari 5.1 +, Chrome 10 + */
Background:-webkit-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );
/* Operators' 11.10 + */
Background:-o-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );

6. Angle ):

As shown in the preceding example, if you do not specify an angle, it is automatically defined based on the starting position. If you want to control the gradient direction more, try setting the angle. For example, the following two gradients have the same starting point left center, but a 30 degree angle is added.

Sample Code with no angle:

Background:-moz-linear-gradient (left, # ace, # f96 );
Background:-webkit-linear-gradient (left, # ace, # f96 );
Background:-o-linear-gradient (left, # ace, # f96 );
 

Add 30-degree angle code:


Background:-moz-linear-gradient (left 30deg, # ace, # f96 );
Background:-webkit-gradient (linear, 0 0,100% 100%, from (# ace), to (# f96 ));

Background:-o-linear-gradient (30deg, # ace, # f96 );

 

The sample code is as follows: add and view more results by yourself:

CSS3        keleyi.com

: