Home > Article > Web Front-end > Are gradients new to css3?
Gradient is a new image type in css3, used to replace images. CSS3 defines two types of gradients: 1. Linear gradient, defined using the "linear-gradient()" function; 2. Radial gradient, defined using the "radial-gradient()" function.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
As a new attribute of CSS3, gradients also have endless potential.
Gradient is a new image type in CSS3, which is used to replace images. Its benefits are:
More flexible.
CSS3 defines two types of gradients:
Linear Gradients - Down/Up/Left /Right/Diagonal direction
Radial Gradient (Radial Gradient) - defined by their center
In fact, the use of gradients is quite common, such as navigation bars:
background-image: linear-gradient(90deg,#0af,#0085ff)
Obviously, this looks much better than a solid color background.
Of course, sometimes we don’t need transition effects:
background-image: linear-gradient(90deg,blue 100px,#FFF 100px,#FFF 200px,red 200px);## # For linear gradients, in addition to linear-gradient, there are also repeating-linear-gradient:
$c1: #fff; $c2: #DF5646; $c3: #1C78A4; background-image: repeating-linear-gradient(45deg, $c1, $c1 10px, $c2 10px, $c2 40px, $c1 40px, $c1 50px, $c3 50px, $c3 80px); Hence It can be seen that gradient is not that simple. Some people must ask here, what other tricks can be played? First of all, we need to understand that gradient is a kind of picture, then think about what other CSS properties are used with pictures?
$color: #122556; background-image: linear-gradient(45deg, $color 25%, transparent 25%, transparent 75%, $color 75%), linear-gradient(-45deg, $color 25%, transparent 25%, transparent 75%, $color 75%); background-size: 30px 30px;Through this example, the idea of using gradients becomes more open. However, there is one more thing to note here:
@mixin menuaction($color) { background: linear-gradient($color 100%, transparent 100%) no-repeat center bottom / 100% 10%; &:hover { background-size: 100% 100%; color: #fff; } }3. Radial gradientradial A gradient is defined by its center. In order to create a radial gradient, you must also 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 also specify the center, shape (circle or oval), and size of the gradient. By default, the center of the gradient is center (meaning at the center point), the shape of the gradient is ellipse (meaning an ellipse), and the size of the gradient is farthest-corner (meaning to the farthest corner). Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Description | |
---|---|
Determine the type of circle: |
|
Define the size of the gradient, possible values: |
|
defines the position of the gradient. Possible values: |
|
is used to specify the starting and ending colors of the gradient. |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #grad1 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */ } #grad2 { height: 150px; width: 200px; background-color: red; /* 浏览器不支持的时候显示 */ background-image: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */ } </style> </head> <body> <h3>径向渐变 - 形状</h3> <p><strong>椭圆形 Ellipse(默认):</strong></p> <div id="grad1"></div> <p><strong>圆形 Circle:</strong></p> <div id="grad2"></div> <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p> </body> </html>4. Summary What will it end with, haha Recently Various coupons, let’s use the knowledge of gradients to get a coupon:
nbsp;html> <meta> <style> div { width: 300px; height: 120px; background: radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(transparent 0, transparent 5px, rgb(247, 245, 201) 5px) no-repeat, radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, radial-gradient(#fff 0, #fff 10px, rgb(247, 245, 201) 10px) no-repeat, linear-gradient(90deg, transparent 10px, rgb(247, 245, 201) 10px); background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 20px 20px, 60px 60px, 60px 60px, 100% 100%; background-position: -10px 0, -10px 20px, -10px 40px, -10px 60px, -10px 80px, -10px 100px, 60px -30px, 60px 90px, left center; } </style> <div></div>(Learning video sharing:
css video tutorial)
The above is the detailed content of Are gradients new to css3?. For more information, please follow other related articles on the PHP Chinese website!