CSS3 classic tutorial series: CSS3 linear gradient (linear-gradient)

The previous article in the "CSS3 classic tutorial series" describes in detailText-shadowThe usage of the text shadow feature. Let's take a look at this article.CSS3The specific usage of the Gradient attribute to implement the Gradient effect. In the past, gradient effects were made into images like shadows and rounded corners, and can be achieved by Directly Writing CSS code.

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

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 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.

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, 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. :

　　

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 examples below are the basic code for applying this section of html and css.

Now we apply a simple gradient style to this div:

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

The effect is as follows:

　　

II. Application of Linear Gradient in Webkit

Syntax:

-Webkit-linear-gradient ([<point >||< angle>,]? <Stop>, <stop> [, <stop>] *) // the latest published writing syntax-webkit-gradient (<type>, <point> [, <radius>]?, <Point> [, <radius>]? [, <Stop>] *) // old syntax writing rules

Parameters:-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. :

　　

　　

Let's take a look at an old-fashioned example:

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

The effect is as follows:

　　

Next, let's take a look at the new writing method:

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

　　Parameters:-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 ),:

　　

Sample Code:

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

Effect:

　　

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( [<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:

　　

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

Effect:

　　

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

The effect is as follows:

　　

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

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

The effect is as follows:

　　

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

As follows:

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

The effect is as follows:

　　

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

The effect is as follows:

　　

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

The effect is as follows:

　　

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

Let's see the effect.

　　

It's amazing if you can compare it with the source image. If you want to understand it, please do it with me.

The linear gradient in CSS3 is introduced above. The next article will introduce the radial gradient in CSS3, so stay tuned ......

Articles you may be interested in

• 20 brilliant CSS3 feature application demonstrations
• CSS3 Media Queries implement responsive design
• CSS3 Tutorials: CSS3 rounded corners
• CSS3 Tutorials: CSS3 shadow details
• CSS3 Tutorials: CSS3 RGBA details

 

Link to this article: CSS3 getting started Tutorial: CSS3 linear gradient (sorted from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources