Detailed description of special effects of CSS3 linear gradient (linear-gradient)

Detailed description of special effects of CSS3 linear gradient (linear-gradient)

In the past, gradient effects were made into images like shadows and rounded corners, and can be achieved by Directly Writing CSS code. The current CSS3 linear gradient (linear-gradient) technology can also achieve this effect!

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-Gradient (radial gradient ). Today, we mainly analyze the specific usage of linear gradient. To better apply CSS3 Gradient, we need to first understand the current kernels of several modern browsers, including Mozilla (Firefox, Flock, etc.), WebKit (Safari, Chrome, etc) opera and Trident ).

This article mainly looks at the applications in Mozilla, Webkit, and Opera. Of course, it can also be implemented in IE. It needs to be implemented through the filter unique to IE. The usage syntax of the filter will be listed later, however, this document does not describe how to use it. If you are interested, you can search for related technical documents.

1. Application of Linear Gradient in Mozilla
Syntax:
-Moz-linear-gradient ([ |,]? , [, ] *)

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.

Example: background:-moz-linear-gradient (top, # ccc, #000 );

II. Application of Linear Gradient in Webkit
Syntax:
-Webkit-linear-gradient ([ |,]? , [, ] *) // The latest release writing syntax
-Webkit-gradient ( , [, ]?, [, ]? [, ] *) // Old-fashioned syntax writing rules

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.
Example:
Background:-webkit-gradient (linear, center top, center bottom, from (# ccc), to (#000 ));
Background:-webkit-linear-gradient (top, # ccc, #000 );

 

Iii. Application of Linear Gradient in Opera
Syntax:
-O-linear-gradient ([ |,]? , [, ]);/* Operators' 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.

 

The above describes the implementation methods of linear gradient in the above four core modules. Next we will mainly implement various linear gradient instances in the Mozilla, Webkit, and Opera modules:
 

From the above syntax, we can clearly understand that to create a linear gradient, we need to create a starting point and a gradient direction (or angle) to define a starting color:
-Moz-linear-gradient ([ |,]? , [, ] *)
-Webkit-linear-gradient ([ |,]? , [, ] *)
-O-linear-gradient ([ |,]? , [, ] *)
Example:
Background:-moz-linear-gradient (left, # ace, # f96);/* Mozilla */
Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96);/* Old gradient for webkit */
Background:-webkit-linear-gradient (left, # ace, # f96);/* new gradient for Webkit */
Background:-o-linear-gradient (left, # ace, # f96);/* Opera11 */
Effect 01:

Starting Point works in a way similar to background position. You can set the horizontal and vertical positions as percentages, or in pixels, or use left/center/right in the horizontal direction, you can use top/center/bottom in the vertical direction. The position starts in the upper left corner. If you do not specify a horizontal or vertical position, the default value is center. It mainly works in the following ways: Top → Bottom, Left → Right, bottom → top, right → left, etc. Then we mainly look at its implementation effect in one way:

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 );
Effect 02:


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 );
Effect 03:


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 );
Effect 04:


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 );
Effect 05:


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 );
Effect 06:


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 );
Effect 07:


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 );
Effect 08:


When the angle is specified, remember that it is an angle generated by the horizontal line and the gradient line, which is counterclockwise. Therefore, using 0deg produces a left-to-right horizontal gradient, and 90 degrees creates a vertical gradient from the bottom to the top. Let's take a look at your core code:
Background:-moz-linear-gradient (, # ace, # f96 );
Background:-webkit-gradient ( , From (# ace), to (# f96 ));
Background:-webkit-linear-gradient (, # ace, # f96 );
Background:-o-linear-gradient (, # ace, # f96 );
Let's take a look at the differences between different angles:
. Deg0 {
Background:-moz-linear-gradient (0deg, # ace, # f96 );
Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (0deg, # ace, # f96 );
Background:-o-linear-gradient (0deg, # ace, # f96 );
}
. Deg45 {
Background:-moz-linear-gradient (45deg, # ace, # f96 );
Background:-webkit-gradient (linear, 0 100%, 100% 0%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (45deg, # ace, # f96 );
Background:-o-linear-gradient (45deg, # ace, # f96 );
}
. Deg90 {
Background:-moz-linear-gradient (90deg, # ace, # f96 );
Background:-webkit-gradient (linear, 50% 100%, 50% 0%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (90deg, # ace, # f96 );
Background:-o-linear-gradient (90deg, # ace, # f96 );
}
. Deg135 {
Background:-moz-linear-gradient (135deg, # ace, # f96 );
Background:-webkit-gradient (linear, 100% 100%, 0 0, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (135deg, # ace, # f96 );
Background:-o-linear-gradient (135deg, # ace, # f96 );
}
. Deg180 {
Background:-moz-linear-gradient (180deg, # ace, # f96 );
Background:-webkit-gradient (linear, 100% 50%, 0 50%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (180deg, # ace, # f96 );
Background:-o-linear-gradient (180deg, # ace, # f96 );
}
. Deg225 {
Background:-moz-linear-gradient (225deg, # ace, # f96 );
Background:-webkit-gradient (linear, 100% 0%, 0 100%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (225deg, # ace, # f96 );
Background:-o-linear-gradient (225deg, # ace, # f96 );
}
. Deg270 {
Background:-moz-linear-gradient (270deg, # ace, # f96 );
Background:-webkit-gradient (linear, 50% 0%, 50% 100%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (270deg, # ace, # f96 );
Background:-o-linear-gradient (270deg, # ace, # f96 );
}
. Deg315 {
Background:-moz-linear-gradient (315deg, # ace, # f96 );
Background:-webkit-gradient (linear, 0% 0%, 100% 100%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (315deg, # ace, # f96 );
Background:-o-linear-gradient (315deg, # ace, # f96 );
}
. Deg360 {
Background:-moz-linear-gradient (360deg, # ace, # f96 );
Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96 ));
Background:-webkit-linear-gradient (360deg, # ace, # f96 );
Background:-o-linear-gradient (360deg, # ace, # f96 );
}
Effect 09:


In addition to the start position and angle, you should specify the start and end colors. The start and end colors are gradient edges that will contain the points of the specified color at the specified position (set in percentage or length. The starting and ending numbers of colors are infinite. If you use a percentage position, 0% indicates that the start point and 100% are the end points, but the values outside the area can be used to achieve the expected results. This is also the key to making a Gradient through CSS3 Gradient, which directly affects your design effect. The example here is not perfect, just to show you a gradient effect, let's use it first. Let's take a look at the examples of different addresses:
Background:-moz-linear-gradient (top, # ace, # f96 80%, # f96 );
Background:-webkit-linear-gradient (top, # ace, # f96 80%, # f96 );
Background:-o-linear-gradient (top, # ace, # f96 80%, # f96 );
Effect 10:


If no position is specified, the color is evenly distributed. Example:
Background:-moz-linear-gradient (left, red, # f96, yellow, green, # ace );
Background:-webkit-linear-gradient (left, red, # f96, yellow, green, # ace );
Background:-o-linear-gradient (left, red, # f96, yellow, green, # ace );
Effect 11:


7. Application Transparency on gradient (Transparency ):
Transparent gradient is quite useful for creating some special effects, for example, when multiple backgrounds are stacked. Here is the combination of two backgrounds: an image, a linear gradient from white to transparent. Let's look at an example on the official website:
Background:-moz-linear-gradient (right, rgba (255,255,255, 0), rgba(255, 255, 255, 1)), url(12.jpg );
Background:-webkit-linear-gradient (right, rgba (255,255,255, 0), rgba(255, url(12.jpg );
Background:-o-linear-gradient (right, rgba (255,255,255, 0), rgba(255, 255, 255, 1)), url(12.jpg );
Effect 12:

Before the gradient effect is added:

After the gradient effect is added: