CSS gradient: Use and instance of webkit core browser, gradientwebkit

CSS gradient: Use and instance of webkit core browser, gradientwebkit
1. Gradient

A gradient is a visual effect applied to a plane. It can be gradually converted from a color to another color. Therefore, you can create a gradient similar to a rainbow, which can be applied to any place where images can be used. For example, you can specify a gradient where the color on the top is red, the color in the middle is blue, and the bottom is yellow as the background color of the div. The gradient is implemented using the-webkit-gradient method and can be used to replace the image URL. Under the core webkit browser (Safari4 +, Chrome), there are two types of gradient, linear and radial. You can also specify multiple intermediate colors.color stops.

Ii. Basic syntax

The basic syntax of the core webkit browser is as follows:

-Webkit-gradient (type, start_point, end_point,/stop ...)

-Webkit-gradient (type, inner_center, inner_radius, outer_center, outer_radius,/stop ...)

 

Parameters:
Parameter type and brief description
Type gradient type, which can be linear gradient (linear) or radial gradient (radial)
Start_point indicates the starting point of the gradient in the gradient image.
End_point: the end point of the gradient in the gradient image.
The stop color-stop () method specifies the specific color in the gradient process.
Inner_center internal center, radial gradient start ring
Inner_radius internal radius, radial gradient start circle
Outer_center center of the ending circle of the external gradient
Outer_radius radius of the ending circle of the external gradient

Parameter description

1. start_point and end_point
If you are familiar with the gradient function of design software such as photoshop or flash, it is easier to understand some concepts or parameters of gradient. For example, if we draw a gradient line in photoshop, there will be a start point and end point. the start point and end point correspond to the start_point and end_point parameters here, for example:

 

Start_point (x1, x2), end_point (x2, y2), where x and y correspond to the coordinates of the starting point in the upper left corner, the y parameter indicates that it is consistent with the background-position in CSS. You can set the pixel value, percentage value, or left, top, right, and bottom.
When x1 is equal to x2 and y1 is not equal to y2, the vertical gradient is implemented. You can adjust the values of y1 and y2 to adjust the gradient radius;
When y1 is equal to y2 and x1 is not equal to x2, the gradient radius can be adjusted by adjusting the values of x1 and x2;
When y1 is not equal to y2 and x1 is not equal to x2, the angle gradient is realized. When x1, x2, y1, y2 is the extreme value, the gradient is close to the vertical gradient or horizontal gradient;
If x1 is equal to x2 and y1 is equal to y2, no gradient is implemented. The from color is used, that is, "from (color value )";

2. stop
Color-stop () I understand the transition point. These transition points have two parameters: the position of the point and the color of the transition point. The parameters can also be found in software gradient editors such as photoshop.

We will see code snippets similar to the following. color-stop (0.5, # ff0000) indicates the central position of the gradient transition process (50%) there is a transition color of # ff0000 (red.

3. Create a linear gradient

Here is the simplest linear gradient, from blue to white. The Code is as follows:

.linear{    width:130px;     height:130px;    border:1px solid green;    padding:10px;     background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff));     -webkit-background-origin:padding;     -webkit-background-clip:content;}<div class="linear"></div>

See the preceding background attribute value to obtain the basic syntax of linear gradient in the core webkit browser, as follows:

-Webkit-gradient (type, x1 y1, x2 y2, from (start color value), [color-stop (location offset-decimal, dock color value),...], to (end color value ));

The following figure shows the implementation result of the sample code above:

4. Create a radial gradient

Radial gradient is also known as radial gradient, which is often used to form ring effect and dizzy effect. Sample Code:

.radial{    display:block;     width:150px;     height:150px;     border:1px solid blue;     background-image:-webkit-gradient(radial, 45 45, 10, 52 50, 30, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62)),         -webkit-gradient(radial, 105 105, 20, 112 120, 50, from(#ff5f98), to(rgba(255,1,136,0)), color-stop(75%, #ff0188)),         -webkit-gradient(radial, 95 15, 15, 102 20, 40, from(#00c9ff), to(rgba(0,201,255,0)), color-stop(80%, #00b5e2)),         -webkit-gradient(radial, 0 150, 50, 0 140, 90, from(#f4f201), to(rgba(228, 199,0,0)), color-stop(80%, #e4c700));}<div class="radial"></div>

The result is as follows:

5. Specify the transition color point

Use the color-stop method to create a color coordinate point. There are two parameters. The first parameter indicates the position of the gradient point within the gradient range, expressed in decimal places. The second parameter is color and can be expressed in the form of RGBA, in this way, you can specify the transparency of the color.

When you use color-stop to specify a transition point or a color point, the color of the gradient from () and to () can be omitted. You can refer to the following example. The first one has a gradient of from () and end (), and the second one does not have a gradient of from () and stop ().

1. Use the from () and to () Methods

body {   background: -webkit-gradient(linear, left top, left bottom, from(#ff0), color-stop(0.5, orange), to(rgb(255, 0, 0)));}

The result of the above Code is as follows:

2. do not specify the start color or end color

background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0.40, #ff0), color-stop(0.5, orange), color-stop(0.60, rgb(255, 0, 0)));

The result is as follows:

3. Multiple transition points at the same position

width:200px; height:120px; background:-webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));

The results are similar to the following:

6. Create duplicate background gradient

CSS3 has a background-size attribute, which can be used to change the size of the background image. In combination with the background gradient attribute, duplicate background gradient can be achieved, as shown in the following code:

width:400px; height:150px; background:-webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ffff00)); -webkit-background-size:0 20px;

The result is as follows:

VII. Instances

A diagonal line is translated from the upper left corner of the circle:

<! DOCTYPE html> 
Implementation results:

Reference: http://www.zhangxinxu.com/wor...