Gradients in the CSS3

Although CSS3 have been used for many years, there are few gradients for CSS3. Today I met and learned a bit.

First we open PS, create a new canvas, select the Gradient tool, this time we can see the top bar above the gradient type as follows

The first one we selected is a linear gradient, the second is a radial gradient, the third is an angle gradient, the fourth is a symmetric gradient, and the fifth is a diamond gradient. There are not so many gradient types available for CSS3, only two basic types of gradients are available: linear and radial, and a combined gradient that repeats gradients.

Linear gradient

The linear gradient in CSS3 is the function of linear-gradient.

Basic syntax:

<linear-gradient> = Linear-gradient ([[<angle> | To <side-or-corner],]? <color-start>[, < color-end>]+) <side-or-corner> = [left | right] | | [Top | bottom]<color-start|end> = <color>[<length>|<percentage>]?

Syntax Description:

<angle>: Specifies the direction (or angle) of the gradient with an angle value.

To left: Sets the gradient to right-to-bottom. Equivalent: 270deg

To: Sets the gradient from left to right. Equivalent: 90deg

To top: Sets the gradient from bottom to top. Equivalent: 0deg

To bottom: Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value, which is equivalent to leaving it blank.

<color-start|end> specifies the starting and ending colors for the gradient:

<color>: Specifies the color.

<length>: Specify the start and end color position with a length value. Negative values are not allowed

<percentage>: Specifies the position of the starting and ending color in percent.

Examples are as follows:

Div{width:200px;Height:100px;margin:10px 5px;Border:1px solid #ddd000; }#LinearStartToEnd{float: Left;background:linear-gradient (#ff0000, #00ff00); }#LinearPercentage{float: Left;background:linear-gradient (#0000ff, #ff0000 52%, #00ff00); }#LinearAnglePercentage{float: Left;background:linear-gradient (90deg, #ff0000 20%, #00ff00 50%, #000000 80%); }#LinearAngle{float: Left;background:linear-gradient (30deg, #ffff00 30%, #ff0000, #00ff00); }#LinearTopRight{float: Left;background:linear-gradient (to Top, #00ff00, #ff0000 50%, #0000ff); }

Radial gradient

Use function: raidal-gradient

Basic syntax

<position> = [<length>①| <percentage>①| left | center①| right]? [<length>②| <percentage>②| Top | center②| bottom]?     <shape> = Circle | Ellipse     <size> = <extent-keyword>|[ <circle-size>| | <ellipse-size>]     <extent-keyword> = closest-side | closest-corner | farthest-side | farthest-corner     <circle-size> = <length>     <ellipse-size> = [<length>| <percentage>]{2}     <shape-size> = <length>| <percentage>     <radial-gradient> = radial-gradient ([[<shape>| | <size>] [at <position >]? , | At <position>,]?<color-start>[[, <color-end>]]+)

A simple description of the grammar

<position> determines the position of the center point. If 2 parameters are provided, the first is the horizontal axis and the second is the ordinate; if only one is provided, the second value defaults to 50%, which is the center

<length>①: Specifies the horizontal value of the center of the radial gradient with a length value. Can be a negative value.

<percentage>①: Specifies the horizontal value of the center of the radial gradient with a percentage. Can be a negative value.

<length>②: Specifies the ordinate value of the center of the radial gradient with a length value. Can be a negative value.

<percentage>②: Specifies the ordinate value of the center of the radial gradient with a percentage. Can be a negative value.

Center①: Sets the horizontal axis value for the center of the radial gradient.

Center②: Sets the ordinate value in the center of the center of the radial gradient.

Left: Sets the horizontal axis value of the center of the radial gradient on the ieft.

Right: Sets the horizontal axis value of the center of the radial gradient on the left.

Top: Sets the ordinate value for the center of the radial gradient at the top.

Bottom: Sets the ordinate value for the center of the radial gradient at the bottom.

<shape> determine the type of circle

Circle: Specifies the radial gradient of the circle

Ellipse: Specifies the radial gradient of the ellipse.

<extent-keyword> Circle | Ellipse accepts the value as size.

Closest-side: Specifies that the radial gradient has a radius length from the center point to the nearest edge from the center point.

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

Farthest-side: Specifies that the radial gradient has a radius length from the center to the edge farthest from the center.

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

<circle-size> Circle accepts the value as size.

<length>: Specifies the radius length of a positive circle radial gradient with a length value. Negative values are not allowed.

<ellipse-size> Ellipse accepts the value as size.

<LENGTH>: Specifies the horizontal or vertical radius length of the elliptical radial gradient with a length value. Negative values are not allowed.

<PERCENTAGE>: Specifies the horizontal or vertical radius length of the elliptical radial gradient, in percent. Negative values are not allowed.

Examples are as follows:

#RadialCenterCircle{float: Left;background:Radial-gradient (circle at center, #ff0000, #ffff00, #00ffff); }#RadialClosestSide{float: Left;background:Radial-gradient (Circle Closest-side, #ff0000, #00ff00, #ffff00); }#RadialFarthestSide{float: Left;background:radial-gradient (farthest-side, #ff0000 20%, #ffff00 60%, #00ff00 80%); }#RadialRightTop{float: Left;background:radial-gradient (at right top, #ff0000, #ffff00, #00ff00); }#RadialRadiusCenter{float: Left;background:radial-gradient (farthest-side at top right, #ff0000, #ffff00, #01fefe); }#RadialGroup{float: Left;background:radial-gradient (farthest-side at top right, #ff0000, #ffff00, #009f00, transparent), Radial-gradien T (60px at top left, #ff0000, #ffff00, #00ff0e); }

Repeating gradients

Repeating gradients are divided into repeating linear gradients and repeating radial gradients, and the syntax for repeating gradients is similar to the underlying gradient syntax.

Here are some basic examples:

#RepeatingLinearPercentage{float: Left;background:repeating-linear-gradient (#ff0000, #00ff00 10%, #000000 15%); }#RepeatingLinearRight{float: Left;background:Repeating-linear-gradient (to right, #ff0000, #00ff00 10%, #000000 15%); }#RepeatingLinearAngle{float: Left;background:repeating-linear-gradient (45deg, #ff0000, #00ff00 10%, #0000ff 15%); }#RepeatingLinearBottomLeft{float: Left;background:repeating-linear-gradient (to bottom left, #00ffff, #ff0000 10%, #00ff00 15%); }#RepeatingRadialCircle{float: Left;background:repeating-radial-gradient (Circle, #ff0000 0, #00ff00 10%, #0000ff 15%); }#RepeatingRadialTopLeft{float: Left;background:repeating-radial-gradient (at top left, #ff0000, #00ff00 10%, #0de0f0 15%, #ffff00 20%, #000000 25%); }#RepeatingRadialClosestCorner{float: Left;background:Repeating-radial-gradient (Circle Closest-corner at 20px 50px, #00ff00, #ff0000 10%, #00ffff 20%, #ffff00 30%, #ff00ff 40%); }

The above is the basic learning about gradients

Gradients in the CSS3