79th, CSS3 Background Gradient effect

CSS3 Background Gradient effect

Learning Essentials:
1. Linear gradient
2. Radial Gradient

This chapter mainly discusses the CSS3 background gradient function in HTML5, there are two main gradient modes: linear gradient and radial (radioactive) Gradient.

A Linear gradient

Linear-gradient gradient function for background color
CSS3 provides a gradient feature for the Linear-gradient property to implement the background Color. In the past, this effect had to be done with Pictures. first, Let's take a look at its style sheet, as Follows:　　　　　　　　　　　　　

linear-gradient (azimuth, start color, end Color)

Azimuth optional parameter, orientation of the Gradient. The values you can use Are:

totop, to top-right, to-right, to bottom, to bottomleft, toleft, to-top left.

Start color required parameter, color value

End color required parameter, color value

Two Required parameters

P {    width: 200px;     height: 100px;     background-image: linear-gradient (#ffbe18, #138010);} <p> is a company owned by the North Green media </p>

Add a position

P {    width: 200px;     height: 100px;     background-image: linear-gradient (to top, #ffbe18, #138010);} <p> is a company owned by the North Green media </p>

The gradient direction achieved through the four groups of top, left, right, and bottom is sometimes relatively single, and we can use values in angular units to set the Orientation. For example, the degree (0deg) is equivalent to totop, and the angle increases in the counterclockwise direction as your angle Increases.

Set azimuth by angle, between 36 degrees, can be negative

P {    width: 200px;     height: 100px;     background-image: linear-gradient (45deg, #ffa500, #008000);} <p> is a company owned by the North Green media </p>

Multi-Color linear Gradient

P {    width: 200px;     height: 100px;     background-image: linear-gradient ( -45deg, #ffa500, #008000, #0000ff, #ff0000);} <p> is a company owned by the North Green media </p>

Set multi-color linear position by percent

P {    width: 200px;     height: 100px;     background-image:linear-gradient ( -45deg, #ffa500 0, #008000 20%, #0000ff 40%, #ff0000 1);} <p> is a company owned by the North Green media </p>

By default: the percentage position of the starting color is 0%, the percentage of the end color is 1, and the other locations are assigned by Average. You can also use px pixels to set, but calculate the trouble points.

Combine backgrounds and use transparent gradients for a strong sense of layering

P {    width: 200px;     height: 100px;     background-color: red;     background-image: linear-gradient (to top right, rgba (0,0,0,0.6), rgba (0,0,0,0));} <p> is a company owned by the North Green media </p>

Repeating Gradient property values

P {    width: 200px;     height: 100px;     background-image:repeating-linear-gradient (to top,orange 10px, Green 30px);} <p> is a company owned by the North Green media </p>

The latest mainstream browsers support CSS3 's gradient properties, So what is the support level for previous browsers? You can refer to the following table:

Opera Firefox Chrome Safari IE

Partial support requires prefix 11.5 No 4 ~ 9 4 ~ 5 None

Support required with prefix no 3.6 ~ 15 1 ~ 25 5.1~ 6 None

Support without prefix 12.1+ 16+ 26+ 6.1+ 10.0+

Some support is mentioned here, stating that it is possible that the gradient is not yet complete, but you can use it by adding a prefix. Specific which is not perfect, has been unable to verify, the version is too long. Then the full format with prefix and unsupported prefix is supported as Follows:

Plus compatible prefixes

P {    background-image: -webkit-linear-gradient (to top, orange, green);     background-image: -moz-linear-gradient (to top, orange, green);     background-image: -o-linear-gradient (to top, orange, green);     background-image: linear-gradient (to top, orange, green); <p> is a company owned by the North Green media </p>

Repeating-linear-gradient property value and Linear-gradient are basically the same, not repeat.

two. Radial Gradient

Radial-gradient background radial gradient
CSS3 provides a radial gradient, also known as a radioactive gradient: the Radial-gradient property Value. It expands in a way that radiates from one point to the Other. The property value style sheet is as Follows:

Radial-gradient (azimuth, start color, end Color)

Azimuth optional parameter, radial Orientation. The values you can use are: pixels, percentages, fixed values, or combinations with

Start color required parameter, color value

End color required parameter, color value

Two Required parameters

P {    background-image: radial-gradient (orange, green);} <p> is a company owned by the North Green media </p>

If you want to set the first optional parameter, one of the practices is set to: cirlce (round) or ellipse (oval). The default is Ellipse.

Shape description

Circle Circle

Ellipse ellipse, Default Value

P {    background-image: radial-gradient (circle, orange, green);} <p> is a company owned by the North Green media </p>

Not only can you set the shape, you can also set the divergence direction of the shape

Direction description

Top out of the roof

Left divergence

Right divergence

Bottom diverging from the bottom

Center diverging from the middle

P {    background-image: radial-gradient (circle at top, orange, green);} <p> is a company owned by the North Green media </p>

You can also compound the direction, such as the lower right

P {    background-image: radial-gradient (circle at right bottom, orange, green);} <p> is a company owned by the North Green media </p>

You can set the divergence distance, which is the radius length of the circle

Radius keyword Description

closest-side Specifies the radius length of the radial gradient from the center to the nearest edge from the center point

Closest-corner Specifies the radius length of the radial gradient from the center to the nearest corner from the center point

farthest-side Specifies the radius length of the radial gradient from the center to the farthest edge from the center

Farthest-corner Specifies the radius length of the radial gradient from the center to the point farthest from the center

P {    background-image:radial-gradient (circle closest-side,orange,green);} <p> is a company owned by the North Green media </p>

Keywords have a bit of a mouthful, you can use pixels to represent radii, but not percent

P {    background-image: radial-gradient (circle 50px, orange, green);} <p> is a company owned by the North Green media </p>

similarly, There are repeated background patterns

P {    background-image: repeating-radial-gradient (circle 50px, orange, green);} <p> is a company owned by the North Green media </p>

Compatibility mode

P {    background-image: -webkit-radial-gradient (circle,orange, green);     background-image: -moz-radial-gradient (circle,orange, green);     background-image: -o-radial-gradient (circle,orange, green);     background-image: radial-gradient (circle, orange, green); <p> is a company owned by the North Green media </p>

Two repeating backgrounds just add the prefix to compatibility mode.

Background-image:-webkit-repeating-radial-gradient
Background-image:-moz-repeating-radial-gradient
Background-image:-o-repeating-radial-gradient
Background-image:repeating-radial-gradient

79th, CSS3 Background Gradient effect