[Original] [WebKit mobile Development Notes] css3 radial gradient

Speaking of gradient, we are no stranger, and we often encounter it in design drafts. The most common and common use is linear gradient and radial gradient, which are developed on the PC end, many large websites need to consider the compatibility of all browsers. Generally, gradient buttons or background images are cut into images by reconfigurator, and mobile development occupies a lot of traffic to use images, if you do not need images, css3 is the first choice for achieving a gradient effect without graphs.

This article uses a radial gradient in mobile development as an example to explain the application and precautions of css3 radial gradient in the project.

I. Basic knowledge of radial gradient

Concept of radial gradient: A circular gradient (from the center to the end point) is performed from the inside to the outside of the color ).

Ii. Basic Syntax of radial gradient

Background-image:-WebKit-gradient (type, X1 Y1, R1, X2 Y2, R2, from (start color value), to (end color value ), color-stop (offset decimal point, docked color value ),...);

The type (type) of the first group is radial, because it is a radial gradient;

In the second group, X1 Y1 and R1 are the center and radius of the first circle;

In the third group, X2 Y2 and R2 are the center and radius of the second circle;

The fourth set of parameters, color-stop, is the intermediate transitional color of the gradient. You can set multiple groups.

2. Compatibility Test of css3 radial gradient in iOS and Android Systems

Android2.x, especially in earlier versions such as 2.1, is not fully supported, and the rendering effect is not rich.

II. The simplest way to write css3 radial gradient

Css3 radial gradient (radial) Code

.bg{　　background:-webkit-gradient(radial,50% 50%,0,50% 50%,100,from(green),to(white));} 

The code is explained as follows. It can be seen that the radial gradient is composed of two circles. Different center and radius can be set for the two circles respectively. The center here is (50%, 50% ), the first 50% is the distance from the center to the X axis, and the second 50% is the distance from the center to the Y axis,

The radius of the first circle is 0, and the gradient radius of the second circle is 100.

After the code is run, the visual effect is shown in figure. It can be seen that the background is filled with white after the White is over.

 

Most of the design drafts are gradient from one color to another, so we can set the first circle gradient as the starting point, the radius is 0, the gradient end point of the second circle, and start to set the radius, this is the simplest practice! It may also be shipped to more complex effects, which requires you to have a deep understanding and use of the css3 gradient.

3., Css3 radial gradient intermediate transitional color-stop

How is color-Stop used? See the image from the Photoshop gradient Editor:

To see the effect clearly, the radial gradient from green to purple in the Code, the transition color in the middle of 50% is red, and the yellow in the middle of 80%

.bg{　　background:-webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow));

} 

The visual effect after running the code is as follows:

ThuCss3 radial gradient practice

How to implement the two-layer linear gradient superposition of the background image provided by the design draft?

 

, Let's analyze,

The top layer (Layer 8) is yellow gradient to transparent, in the radius between 40 to 180 from 70% transparency gradient to 0%, that is, the gradient is completely transparent.

-WebKit-gradient (radial, 50% 50%, 50%, 180, 249,161, from (rgba (0.7, 22, 249,161), to (rgba )));
// Rgba is the RGB color of aplha channel. In the last parameter, the channel value ranges from 0 ~ 1.0, 0 indicates completely transparent, 1 indicates not transparent

The middle layer (Layer 7) is orange gradient to transparent, with a gradient from 250 to 100% in the radius between 80 and 0%.

-webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));

Red background (Layer 4)

background-color:#EE1D25;

Tip: Normally, the attribute values in the CSS attribute will overwrite the previous attribute, while the multi-layer background gradient in-WebKit-gradient is placed in the same attribute value, the top-level values that appear first are displayed in the order from top to bottom. For example, if multiple divs use Z-index, the upper and lower levels are displayed. The above code is merged as follows:

.bg{    background-image:-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0))),                     -webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));　　background-color:#EE1D25;}    

OK! Done ~

Code download