CSS3 linear gradient (linear-gradient) effects detailed

In the past, the gradient effect and the shadow, rounded effect is the same as a picture, directly write CSS code can be achieved. Now the CSS3 linear gradient (linear-gradient) technology can also achieve this effect!

CSS3 Gradient are divided into linear-gradient (linear gradient) and radial-gradient (radial gradient). Today, we mainly focus on the linear gradient to analyze its specific usage. In order to better apply CSS3 Gradient, we need to first understand the current several modern browser kernel, mainly Mozilla (Firefox,flock, etc.), WebKit (Safari, chrome, etc.), opera (opera browser), Trident (annoying IE browser).

This article mainly look at Mozilla, Webkit, Opera under the application, of course, under IE can also be implemented, he needs to be implemented by IE filter, in the following will list the use of the filter syntax, but will not specifically describe how practical, interested in the search for relevant technical documents.

The application of linear gradient in Mozilla
Grammar:
-moz-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)

Parameters: There are three parameters, the first parameter represents the direction of the linear gradient, top is from top to bottom, left is from the right, and if it is defined as a left top, it is from the upper-right corner to the lower-bottom corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them, representing a gradient of multiple colors.

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

The application of linear gradient in Webkit
Grammar:
-webkit-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)//latest published writing Grammar
-webkit-gradient (<TYPE>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*]//old grammar writing rules

Parameters:-webkit-gradient is the implementation parameter of the WebKit engine for the gradient, a total of five. The first parameter represents a gradient type (type), either linear (linear gradient) or radial (radial gradient). The second and third arguments are a pair of values that represent the beginning and end of the gradient, respectively. This pair of values can be expressed in the form of coordinates, or as a key value, such as the left top (upper right corner), and the left bottom (lower right corner). The fourth and fifth parameters, respectively, are two color-stop functions. The Color-stop function accepts two parameters, the first represents the position of the gradient, 0 is the starting point, 0.5 is the midpoint, 1 is the end point, and the second represents the color of the point.
Example:
Background:-webkit-gradient (linear,center top,center bottom,from (#ccc), to (#000));
Background:-webkit-linear-gradient (top, #ccc, #000);

The application of linear gradient in Opera
Grammar:
-o-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]); /* Opera 11.10+ */

Parameters:-o-linear-gradient has three parameters. The first parameter represents the direction of the linear gradient, top is from top to bottom, left to right, and if it is defined as left top, it is from the upper-right corner to the bottom-bottom corner. The second and third parameters are the start and end colors, respectively. You can also insert more parameters between them, representing a gradient of multiple colors. (Note: Opera supports a limited version, this test is in the Opera11.1 version, the following is not the prompt)
Example: Background:-o-linear-gradient (top, #ccc, #000);

The application of linear gradient in Trident (IE)
Grammar:
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 relies on filters for gradients. STARTCOLORSTR represents the color of the starting point, and endcolorstr represents the end color. GradientType represents a gradient type, 0 is the default value, represents a vertical gradient, and 1 represents a horizontal gradient.

Above we mainly introduced the linear gradient in the above four core modules implementation method, and then we mainly for the linear gradient in Mozilla, Webkit, Opera three modules to achieve a variety of different linear gradient instances:

From the syntax above we can clearly know that to create a linear gradient, we need to create a starting point and a gradient direction (or angle), define a starting color:
-moz-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)
-webkit-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)
-o-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)
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:

The starting point (starting points) works similar to background position. You can set the horizontal and vertical positions as percentages, or in pixels, or you can use left/center/right in the horizontal direction, and you can use top/center/bottom vertically. The position starts at the upper-left corner. If you don't specify a horizontal or vertical position, it defaults to center. Its working methods mainly include: Top→bottom, Left→right, Bottom→top, Right→left and so on, then we mainly one kind to see its realization effect:

1, starting at 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 + * *
Background:-webkit-linear-gradient (top, #ace, #f96);
/* Opera 11.10+ */
Background:-o-linear-gradient (top, #ace, #f96);
Effect 02:


2, starting from left (horizontal direction) and center (vertical direction) is also left→right:
/* Firefox 3.6+ */
Background:-moz-linear-gradient (left, #ace, #f96);
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (left, #ace, #f96);
/* Opera 11.10+ */
Background:-o-linear-gradient (left, #ace, #f96);
Effect 03:


3. Starting at left (horizontal direction) and top (vertical):
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), Colo R-stop (0.75, #f96), to (#ace));
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (left, #ace, #f96, #ace, #f96, #ace);
/* Opera 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), Colo R-stop (0.95, #f96), to (#ace));
/* Safari 5.1+, Chrome + * *
Background:-webkit-linear-gradient (left, #ace, #f96 5, #ace, #f96 95%, #ace);
/* Opera 11.10+ */
Background:-o-linear-gradient (left, #ace, #f96 5, #ace, #f96 95%, #ace);
Effect 06:


6. Angle (Angle):
As seen above, if you do not specify an angle, it is automatically defined based on the starting position. If you want more control over the direction of the gradient, you might as well set the angle to try. For example, the following two gradients have the same starting point left center, but add an angle of 30 degrees.
example 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 a 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 you specify the angle, remember that it is an angle that is produced by the horizontal line and the gradient lines, counterclockwise direction. Therefore, using 0deg will result in a left-to-right transverse gradient, while 90 degrees will create a vertical gradient from the bottom to the top. I'll take a look at your core code:
Background:-moz-linear-gradient (<angle>, #ace, #f96);
Background:-webkit-gradient (<type>,<angle>, from (#ace), to (#f96));
Background:-webkit-linear-gradient (<angle>, #ace, #f96);
Background:-o-linear-gradient (<angle>, #ace, #f96);
Let's take a look at the differences between the 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 starting and ending colors. The start and end color is along the gradient line and will have a specified color point at the specified position (in percent or length). The number of ends of the color is infinite. If you use a percentage position, 0% represents the start point and 100% is the end point, but values outside the region can be used to achieve the desired effect. This is also through the CSS3 gradient a key to make the gradient, which directly affect your design effect, like our example here is not the perfect effect, just to show you a gradient effect, we will use it first. Let's take a look at a different example of the start color:
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. As in the following 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. Apply transparency on the gradient (Transparency):
Transparent gradients are useful for making special effects, for example, when stacking multiple backgrounds. Here is a combination of two backgrounds: a picture, a white to transparent linear gradient. Let's look at an example of an 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,255,255,1)), 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 not added:

After adding a gradient effect:

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS3 linear gradient (linear-gradient) effects detailed