CSS gradient Gradient WebKit core browser usage and examples

First, about the gradient

A gradient is a visual effect that is applied to a plane and can gradually turn from one color to another, so you can create a rainbow-like effect gradient that can be applied anywhere you can use a picture. For example, you can specify one such gradient: The top color is red, the middle is blue, and the bottom is yellow for the background color of the div. Gradients are implemented using the-webkit-gradient method, which can be used instead of image URLs. Under the WebKit Core browser (safari4+, Chrome), there are two types of gradients, linear and radial. You can also specify more than one intermediate transition color, which is called color stops .

Second, basic grammar

The basic syntax under the WebKit core 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 types and brief descriptions
Type gradient, which can be a linear gradient (linear) or a radial gradient (radial)
Start_point The starting point of a gradient in a gradient image
End_point the end point of a gradient in a gradient image
The Stop Color-stop () method, which specifies a specific color in the gradient process
Inner_center Inner Center point, radial gradient start ring
Inner_radius internal radius, radial gradient start circle
Outer_center The center point of the outer gradient end Circle
Outer_radius radius of the outer gradient end Circle

Specific description of the parameter

1.start_point and End_point
If you are familiar with the gradients of design software such as Photoshop or Flash, it is easier to understand some of the concepts or parameters of a gradient. For example, if we draw a line in Photoshop, there will be a starting point and an end point, which corresponds to the start_point and End_point parameters here, such as:

Start_point (X1,X2), End_point (X2,y2), where x, y corresponds to the starting point of the upper-left corner, where the x, y parameter is consistent with the background-position in the CSS, allowing the pixel value, or a percentage value or Left,top,right,bottom.
When X1 equals x2,y1 is not equal to Y2, realizes vertical gradient, adjusts y1,y2 value can adjust the gradient radius size;
When y1 equals y2,x1 not equal to x2, realize horizontal gradient, adjust the value of x1,x2 can adjust the gradient radius size;
When the Y1 is not equal to y2,x1 is not equal to x2, realize the angle gradient, when the X1,x2,y1,y2 value is the extremum of the time near the vertical gradient or horizontal gradient;
When x1 equals x2,y1 equals y2, the implementation has no gradient, takes the from color, i.e. "from (color value)";

2.stop
Color-stop () My understanding is the transition point, which has two parameters, one is the position of the point and the other is the color of the transition point. The schematic of these parameters can also be found in the software gradient editor such as Photoshop in the corresponding location.

We will see a code snippet similar to the following, Color-stop (0.5, #ff0000) means that there is a transition color of #ff0000 (red) in the center position of the gradient transition process (50% position).

Third, create a linear gradient

Shown here is the simplest linear gradient, from blue to white gradient. 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 Background property value above to get the basic syntax for a linear gradient under the WebKit core browser, as follows:

-webkit-gradient (type,x1 y1, X2 y2, from (start color value), [Color-stop (Position offset-decimal, docked color value),...],to (end color value));

The above example code achieves the following effects:

Iv. Creating a radial gradient

Radial gradients can also be called radially gradient, commonly used to form annular effect, halo effect and so on. The following example code:

. Radial{Display:Block;width:150px;Height:150px;Border:1px solid Blue;Background-image:-webkit-gradient (radial, GB, Max, MW, +, from (#A7D30C), to (Rgba (1,159,98,0)), Color-stop (90%, #019F62)),         -webkit-gradient (Radial, 255,1,136,0, Color-stop (75%, #ff0188)), and the (#ff5f98) to (RGBA),         -webkit-gradient (Radial, Max., 102, #00c9ff), to (Rgba (0,201,255,0)), Color-stop (80%, #00b5e2)), -webkit-gradient (radial, 0, 0, +, (#f4f201), to (Rgba (228, 199,0,0)), Color-stop (80%, #e4c700));}<div class= "Radial" ></div>

As a result, cut from Safari browser:

V. Specifying transition color POINTS

Create color punctuation Even with the Color-stop method. Contains two parameters, the first parameter represents the position of the gradient point over the entire range of the gradient, expressed as a decimal, and the second parameter is a color, which can be expressed in the form of RGBA, which specifies the transparency of the color.

When you use Color-stop to specify a transition point or a color punctuation, the start (from ()) of the gradient and the end (to ()) color are omitted. You can see the following instance, the first one with a gradient from () and end (), the second without the From () and stop ().

1. Use the From () and to () methods

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

The above code results are as follows:

2. Do not specify the starting and ending colors

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 results are as follows, truncated from Safari 4 browser:

3. Multiple transition points in the same location

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:

VI. Create background repeating gradient

CSS3 has a Background-size property, you can change the size of the background image, with the background gradient property can be used to achieve a repeating background gradient, the following code:

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

Results such as:

Vii. examples

A slash shifts the circle from the upper-left corner of the circle:

<!DOCTYPE HTML><HTML><Head><MetaCharSet= "Utf-8"/><title>Use of gradient</title><Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0"><Linkhref= "Css/bootstrap.css"rel= "stylesheet"><style>Html,body{background:#000;}. Divcirle{position:Absolute;width:385px;Height:385px; Left:173px;Top:50px;Border-radius:385px;Border:2px solid #fff;Overflow:Hidden;}. Divcirle:before{content: "";position:Absolute;width:40px;Height:467px;Top:0; Left:-150px;Overflow:Hidden;background:-moz-linear-gradient (Left,rgba (255,255,255,0) 0,rgba (255,255,255,.2) 50%,rgba (255,255,255,0) 100%);background:-webkit-gradient (linear,left top,right top,color-stop (0%,rgba (255,255,255,0)), Color-stop (50%,rgba ( 255,255,255,.2)), Color-stop (100%,rgba (255,255,255,0) ));background:-webkit-linear-gradient (Left,rgba (255,255,255,0) 0,rgba (255,255,255,.2) 50%,rgba (255,255,255,0) 100%);background:-o-linear-gradient (Left,rgba (255,255,255,0) 0,rgba (255,255,255,.2) 50%,rgba (255,255,255,0) 100%);-webkit-transform:skewx ( -25deg);-moz-transform:skewx ( -25deg);Transform:skewx ( -25deg);}. Divcirle.current:before{ Left:650px;-webkit-transition:Left 8s;-moz-transition:Left 8s;transition:Left 8s;  }</style></Head><Body><Divclass= "Divcirle"></Div><Scriptsrc= "Js/jquery-1.11.3.min.js"></Script><Script>    $(function(){        $(". Divcirle"). addclass (' Current'); })</Script></Body></HTML>

The effect of the implementation:

Reference Address: Http://www.zhangxinxu.com/wor ...

CSS gradient Gradient WebKit core browser usage and examples