A detailed example of linear-gradient in CSS3

"CSS3 Classic Tutorial Series" In the previous article to introduce you in detail Text-shadowThe use of the Text Shadow feature, today this article we are together to see CSS3The specific usage of the Gradient property that implements the gradient effect in the. In the past, the gradient effect and the shadow, rounded effect is the same as a picture, directly write CSS code can be achieved.

Related articles that may be of interest to you

• Web developers and designers must read articles recommended

• 20 Very beautiful CSS3 features application demo

• 35 Amazing CSS3 Animation effects Demo

• Recommended 12 beautiful CSS3 button implementation scheme

• The ultimate collection of 24 very useful CSS3 tools

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 as usual ignore IE, we mainly look at the Mozilla, Webkit, Opera under the application, of course, under IE can also be implemented, he needs to be implemented by IE specific filters, in the following will list the use of the filter syntax, but will not specifically describe how practical, Interested can search the 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. ：

　　

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

Html:

<p class= "Example example1" ></p>

　　Css:

. example {   width:150px;   height:80px; }

Without special instructions, the following examples are the basic code for applying this section of HTML and CSS.

Now let's apply a simple gradient style to this p:

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

The effect is as follows:

　　

The application of linear gradient in Webkit

Grammar:

-webkit-linear-gradient ([<point> | | <angle>,]? <stop>, <stop> [, <stop>]*)// Latest Release 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. ：

　　

　　

Let's start with an example of an old-fashioned notation:

Background:-webkit-gradient (linear,center top,center bottom,from (#ccc), to (#000));

The effect is as follows:

　　

Then we are looking at the new style of writing:

-webkit-linear-gradient (Top, #ccc, #000);

This effect I was not posted out, everyone in the browser in a look to understand, they are consistent effect. In comparison, both the Mozilla and Webkit are basically the same, but the difference between their prefixes, of course, one day they can unify into the same, for us of course is better, then do not have to deal with. Will greatly save our development time yo.

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 code:

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

Effect:

　　

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>]*)

The specific application is as follows:

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*/

The effect is as follows:

　　

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:

　　

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-line Ar-gradient (left, #ace, #f96);/* Opera 11.10+ */background:-o-linear-gradient (left, #ace, #f96);

The effect is as follows:

　　

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);

The effect is as follows:

　　

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 + */background:-webkit-linear-gradient (left, #ace, #f96, #ace, #f96, #ace); /* Opera 11.10+ */background:-o-linear-gradient (left, #ace, #f96, #ace, #f96, #ace);

The effect is as follows:

　　

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, #f ), Color-stop (0.5, #ace), Color-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);

The effect is as follows:

　　

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);

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);

As follows:

　　

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 (#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);}

The effect is as follows:

　　

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);

The effect is as follows:

　　

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);

The effect is as follows

　　

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 (/HTTP// demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg); background:- Webkit-linear-gradient (right, Rgba (255,255,255,0), Rgba (255,255,255,1)), url (http://demos.hacks.mozilla.org/ openweb/resources/images/patterns/flowers-pattern.jpg); background:-o-linear-gradient (right, Rgba (255,255,255,0) , Rgba (255,255,255,1)), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg );

Then look at the effect.

　　

You can enter here and the original image to do a comparison, is not very magical ah. If you want to experience it, come and do it with me.

"Recommended"

1. CSS3 Free Video Tutorial

2. How to use lineaer-gradient in CSS3

3. In-depth explanation CSS3 oblique linear gradient lineaer-gradient

4. A detailed explanation of linear-gradient parameters in CSS3

5. Syntax of CSS linear-gradient ()