Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use css3 gradients, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

CSS3 gradient (gradients) allows you to show a smooth transition between two or more specified colors.

In the past, you had to use images to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce download time and broadband usage. In addition, the elements of the gradient look better when zoomed in, because the gradient is generated by the browser.

CSS3 defines two types of gradients:

Linear gradient (Linear Gradients)-down / up / left / right / diagonal

Radial gradient (Radial Gradients)-defined by their center

CSS3 linear gradient

To create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can set a starting point and a direction (or an angle).

Grammar

Background: linear-gradient (direction, color-stop1, color-stop2,...)

Linear gradient-from top to bottom

The following example demonstrates a linear gradient from the top. The starting point is red and slowly transition to blue:

Linear gradient code from top to bottom

# grad {

Background:-webkit-linear-gradient (red, blue); / * Safari 5.16.0 * /

Background:-o-linear-gradient (red, blue); / * Opera 11.112.0 * /

Background:-moz-linear-gradient (red, blue); / * Firefox 3.615 * /

Background: linear-gradient (red, blue); / * Standard syntax * /

}

Linear gradient-from left to right

The following example demonstrates a linear gradient starting from the left. The starting point is red and slowly transition to blue:

The code is as follows

# grad {

Background:-webkit-linear-gradient (left, red, blue); / * Safari 5.16.0 * /

Background:-o-linear-gradient (right, red, blue); / * Opera 11.112.0 * /

Background:-moz-linear-gradient (right, red, blue); / * Firefox 3.615 * /

Background: linear-gradient (to right, red, blue); / * Standard syntax * /

}

Linear gradient-diagonal

You can make a diagonal gradient by specifying horizontal and vertical starting positions.

The following example demonstrates a linear gradient starting from the upper left corner (to the lower right corner). The starting point is red and slowly transition to blue:

Linear gradient code from the upper left corner to the lower right corner

# grad {

Background:-webkit-linear-gradient (left top, red, blue); / * Safari 5.16.0 * /

Background:-o-linear-gradient (bottom right, red, blue); / * Opera 11.112.0 * /

Background:-moz-linear-gradient (bottom right, red, blue); / * Firefox 3.615 * /

Background: linear-gradient (to bottom right, red, blue); / * Standard syntax * /

}

Use Angl

If you want more control over the direction of the gradient, you can define an angle instead of predefining the direction (to bottom, to top, to right, to left, to bottom right, etc.).

Grammar

Background: linear-gradient (angle, color-stop1, color-stop2)

The angle is the angle between the horizontal line and the gradient line, calculated counterclockwise. In other words, 0deg will create a gradient from bottom to top, and 90deg will create a gradient from left to right.

However, note that many browsers (Chrome,Safari,fiefox, etc.) use the old standard, that is, 0deg will create a gradient from left to right, and 90deg will create a gradient from bottom to top. The conversion formula 90-x = y, where x is the standard angle and y is the non-standard angle.

The following example shows how to use angles on linear gradients:

Linear gradient code with a specified angle

# grad {

Background:-webkit-linear-gradient (180deg, red, blue); / * Safari 5.16.0 * /

Background:-o-linear-gradient (180deg, red, blue); / * Opera 11.112.0 * /

Background:-moz-linear-gradient (180deg, red, blue); / * Firefox 3.615 * / background: linear-gradient (180deg, red, blue); / * Standard syntax * /

}

Use multiple color nodes

The following example shows how to set up multiple color nodes:

Linear gradient code from top to bottom for multiple color nodes

# grad {

Background:-webkit-linear-gradient (red, green, blue); / * Safari 5.16.0 * /

Background:-o-linear-gradient (red, green, blue); / * Opera 11.112.0 * /

Background:-moz-linear-gradient (red, green, blue); / * Firefox 3.615 * /

Background: linear-gradient (red, green, blue); / * Standard syntax * /

}

The following example shows how to create a linear gradient with rainbow colors and text:

# grad {

/ * Safari 5.16.0 * /

Background:-webkit-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet)

/ * Opera 11.1-12.0 * /

Background:-o-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet)

/ * Firefox 3.615 * /

Background:-moz-linear-gradient (left,red,orange,yellow,green,blue,indigo,violet)

/ * Standard syntax * /

Background: linear-gradient (to right, red,orange,yellow,green,blue,indigo,violet)

}

Use transparency (transparent)

To add transparency, we use the rgba () function to define the color node. The last argument in the rgba () function can be a value from 0 to 1, which defines the transparency of the color: 0 for full transparency and 1 for complete opacity.

The following example demonstrates a linear gradient starting from the left. The starting point is completely transparent, slowly transitioning to a completely opaque red:

Linear gradient from left to right with transparency code

# grad {

Background:-webkit-linear-gradient (left,rgba), rgba); / * Safari 5.1-6 * /

Background:-o-linear-gradient (right,rgba), rgba); / * Opera 11.1-12 minutes /

Background:-moz-linear-gradient (right,rgba), rgba); / * Firefox 3.615)

Background: linear-gradient (to right, rgba, rgba); / * Standard syntax * /

}

Repetitive linear gradient

The repeating-linear-gradient () function is used for repeated linear gradients:

The code is as follows

# grad {

/ * Safari 5.16.0 * /

Background:-webkit-repeating-linear-gradient (red, yellow 10%, green 20%)

/ * Opera 11.1-12.0 * /

Background:-o-repeating-linear-gradient (red, yellow 10%, green 20%)

/ * Firefox 3.615 * /

Background:-moz-repeating-linear-gradient (red, yellow 10%, green 20%)

/ * Standard syntax * /

Background: repeating-linear-gradient (red, yellow 10%, green 20%)

}

The above is all the contents of the article "how to use css3 gradient colors". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.