Use of CSS gradient in core WebKit browsers

ArticleDirectory

• 1. Gradient
• Ii. Basic syntax
• 3. Create a linear gradient
• 4. Create a radial gradient
• 5. Specify the transition color point
• 6. Create duplicate background gradient

From http://www.zhangxinxu.com by zhangxinxu
Address: http://www.zhangxinxu.com/wordpress? P = 734

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	Brief Description
Type	Gradient Type, which can be linear gradient (linear) or radial gradient (radial)
Start_point	Starting Point of the gradient in the gradient image
End_point	The end point of the gradient in the gradient image.
Stop	The color-stop () method that specifies the specific color in the gradient process.
Inner_center	Inner center, radial gradient start ring
Inner_radius	Internal radius, radial gradient starting circle
Outer_center	Center of the external gradient ending circle
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 seeCodeFragment,Color-stop (0.5, # ff0000)It indicates that there is a transition color with the color # ff0000 (red) at the center of the gradient transition process (50%.

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 (#00 abeb), 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 (75%,), color-stop (, # 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 (# ff0000 ));}
 

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, # ff0000 ));
 

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 (#00 abeb), 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:

References
1. Safari CSS visual effects Guide
2. Linear Gradients (linear gradient) of WebKit kernel Browser)
3. CSS property Functions

If you find that the content in the article is inaccurate or that you need to communicate with others, you can comment on it or go here to ask questions.
Original article, reproduced please indicate from Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]
Address: http://www.zhangxinxu.com/wordpress? P = 734

(This article is complete)