HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
CSS3 gradients (gradients) allows you to display a smooth transition between two or more specified colors.
Previously, you have to use an image to achieve these effects. However, by using CSS3 gradients (gradients), you can reduce the download events and the use of broadband. In addition, elements of transition effects look better when you zoom in, because the gradient (gradient) is generated by the browser.
CSS3 defines two types of gradients (gradients):
Numbers in the table attribute specifies the full support of the first version of the browser.
Behind with -webkit -, - moz- or -o- specifies the required number with the prefix attribute to support the first version.
属性 | |||||
---|---|---|---|---|---|
linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
To create a linear gradient, you must define at least two colors nodes. Color node that is the color you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).
Linear gradient examples:
Linear gradient - from top to bottom (by default)
The following example demonstrates a linear gradient from the top. The starting point is red, and slowly transition to blue:
Linear gradient from top to bottom:
Linear gradient - from left to right
The following example demonstrates a linear gradient from the left. The starting point is red, and slowly transition to blue:
Linear gradient from left to right:
Linear gradient - diagonal
You can make a diagonal gradient by specifying horizontal and vertical starting position.
The following example demonstrates from the top left corner (bottom right) linear gradient. The starting point is red, and slowly transition to blue:
From upper left to lower right corner of a linear gradient:
If you do want more control over the direction of the gradient, you can define a point of view, rather than a predefined direction (to bottom, to top, to right, to left, to bottom right, and so on).
Angle refers to the angle between the horizontal and the gradient line, calculated counterclockwise. In other words, 0deg will create a gradient from bottom to top, 90deg creates a gradient from left to right.
However, note that many browsers (Chrome, Safari, fiefox, etc.) using the old standard, namely 0deg will create a gradient from left to right, 90deg will create a gradient from bottom to top. Conversion formula 90 - x = y where x is the standard angle, y is a non-standard angle.
The following example demonstrates how to use the linear gradient angle:
Linear gradient with a specified angle:
The following example demonstrates how to set a plurality of color nodes:
Linear gradient from top to bottom with a plurality of color nodes:
The following example demonstrates how to create a rainbow of colors and text with a linear gradient:
CSS3 gradients also supports transparency (transparency), it can be used to create the effect of weakening fades.
To add transparency, we use rgba () function to define the color of the node. rgba () function the last parameter is a value from 0 to 1, which defines the transparency of the color: 0 is fully transparent, 1 is fully opaque.
The following example demonstrates a linear gradient from the left. The starting point is completely transparent, and slowly transition to fully opaque red:
Linear gradient from left to right, with transparency:
repeating-linear-gradient () function is used to repeat a linear gradient:
A duplicate linear gradient:
Radial gradient is defined by its center.
To create a radial gradient, you must also define at least two colors nodes. Color node that is the color you want to show a smooth transition. At the same time, you can also specify the center of the gradation, shape (prototype or oval), size. By default, those at the center is Center (shown in the center), the shape of the gradation is Ellipse (represented ellipse), the size of gradient is farthest-corner (represented to the farthest corner).
Radial gradient examples:
Radial Gradient - Color nodes evenly distributed (by default)
Radial gradient color node evenly distributed:
Radial gradient - the color unevenly distributed nodes
Radial gradient color node unevenly distributed:
shape parameter defines the shape. It can be a value circle or ellipse. Wherein, circle representing the circle, ellipse indicates oval. The default value is ellipse.
The shape of a circular radial gradient:
size parameter defines the size of the gradient. It can be the following four values:
Radial gradient with different sizes keywords:
repeating-radial-gradient () function is used to repeat a radial gradient:
Repeat a radial gradient: