CSS3 Gradients gradient effect

 CSS3 Gradients is a new function used to design gradient effects . In traditional web design, if you want to design a gradient background color or a block with a gradient color, you need to deal with it through the design of the picture, but it is With the development of CSS3, such traditional design thinking has changed. CSS3 has introduced a function called Gradients, which can design different gradient effects. Only through Gradients adjustments, such as gradient direction and color presented by gradients , Gradient rendering shape, you can easily make the browser produce the gradient effect itself, which can be applied to the background gradient effect of the web page itself or the gradient visual effect outside the area. The advantage is that you don’t need to design the gradient image first. , Reduce the waste of bandwidth, and the effect of gradual enlargement is better than the traditional picture-based gradation, because the gradient is automatically generated by the browser, the advantages are of course not to mention.

CSS3 Gradients currently has two gradient effects, namely Linear Gradients and Radial Gradients. The settings of the two are not the same, and the actual visual effects are of course different. This article Will provide their practical examples in order for readers and friends for reference.

Browser support for CSS3 Gradients

• Support for IE 10.0 and above.
• Google Chrome 26.0 and above are supported.
• FireFox 16.0 and above are supported.
• Apple Safari 6.1 and above are supported.
• Opera 12.1 and above are supported.

The above sorted out the support level of various mainstream browsers for CSS3 Gradients. Almost the latest version of the browser already supports it. However, when designing Gradients, it is recommended to find a few more browsers to actually test the effect, in order to make the effect successful. The rate is higher, it is recommended to use various browsers to apply prefixes, as follows.

Browser applicable prefix

• Google Chrome and Apple Safari use -webkit-
• Mozilla FireFox uses -moz-
• Opera uses -o-
  

Syntax rules for Linear Gradient and Radial Gradients

Linear gradient syntax: background: linear-gradient(direction, color 1, color 2, ...);
radial gradient syntax: background: radial-gradient(ellipse or circle, color 1, color 2,. .....);

The direction of the linear gradient can be from top to bottom, from bottom to top, from left to right or from right to left. The gradient angle can even be set, and the radial gradient can be used. The default ellipse (ellipse) or custom circle (circle) gradient effect, these will be presented to you in the following examples.

CSS3 Gradients Linear Gradients effect example

Gradients can set the direction of the linear gradient, the default value is from top to bottom, and also allows web designers to set it to be from left to right, from right to left or even diagonal Linear expression, respectively express the following example grammar.

Linear gradient effect from top to bottom (default value)

<style type="text/css">
#T2B{
width:200px;
height:150px;
background: -webkit-linear-gradient(yellow,red);
background: -o-linear-gradient(yellow,red);
background : -moz-linear-gradient(yellow,red);
background: linear-gradient(yellow,red);
}
</style>
<div id="T2B"></div>

The actual effect of the example

In this example, the effect is set to gradually start from yellow to red, and the default is to gradually increase from top to bottom.

Linear gradient effect from left to right

<style type="text/css">
#L2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left,yellow,red);
background: -o-linear-gradient(right,yellow, red);
background: -moz-linear-gradient(right,yellow,red);
background: linear-gradient(to right,yellow,red);
}
</style>
<div id="L2R"></div>

The actual effect of the example

Although the default effect of the linear gradient of the default CSS3 Gradients is from top to bottom, designers are also allowed to use horizontal gradients, such as the gradient from left to right in this example. It is worth noting that it is suitable for Google Chrome The prefix used with Apple Safari -webkit- The first direction parameter should use the concept of "from which direction", like left in the grammar, it means that the first color yellow is from the left to the right and gradually becomes red, others The browser uses the concept of "gradient to which direction", so the first direction parameter is written as right, which means "gradient to the right".

Diagonal linear gradient effect ( from bottom left to top right )

<style type="text/css">
#B2R{
width:200px;
height:150px;
background: -webkit-linear-gradient(left top,yellow,red);
background: -o-linear-gradient(bottom right, yellow,red);
background: -moz-linear-gradient(bottom right,yellow,red);
background: linear-gradient(to bottom right,yellow,red);
}
</style>
<div id="B2R"> </div>

The actual effect of the example

If the gradient from top to bottom or the horizontal gradient from left to right cannot meet the actual needs, you can also use the diagonal gradient method like this example. The same applies to the prefix used by Google Chrome and Apple Safari- The first direction parameter of webkit- uses "from which direction to start gradient", while other browsers use the concept of "from which direction to gradient".

Linear gradient effect using angle adjustment

<style type="text/css">
#UA{
width:200px;
height:150px;
background: -webkit-linear-gradient(90deg,yellow,red);
background: -o-linear-gradient(90deg,yellow, red);
background: -moz-linear-gradient(90deg,yellow,red);
background: linear-gradient(90deg,yellow,red);
}
</style>
<div id="UA"></div>

The actual effect of the example

In this example, we use the angle to determine the direction of the gradient. The default gradient direction of CSS3 Gradients is from top to bottom, but here we use the first parameter of gradients and set it to 90deg, which is 90 degrees. The meaning is to make the original effect of gradation from top to bottom into gradation from left to right, and the angle of rotation allows the designer to decide by himself.

CSS3 Gradients Radial Gradients effect example

<style type="text/css">
#ellipse{
width:200px;
height:100px;
background: -webkit-radial-gradient(ellipse,white,orange);
background: -o-radial-gradient(ellipse,white, orange);
background: -moz-radial-gradient(ellipse,white,orange);
background: radial-gradient(ellipse,white,orange);
}
#circle{
width:200px;
height:100px;
background: -webkit-radial -gradient(circle,white,orange);
background: -o-radial-gradient(circle,white,orange);
background: -moz-radial-gradient(circle,white,orange);
background: radial-gradient(circle, white,orange);
}
</style>
<div id="ellipse">ellipse</div>
<div id="circle">circle</div>

The actual effect of the example

ellipse

circle

CSS3 Gradients can design not only linear gradient effects, but also radial gradient effects. The so-called radial gradient is a round gradient like the example. The default Radial gradient of Gradients is an ellipse ( ellipse, allowing web designers to modify the gradient effect of a circle. From the presentation effect of the example, it is obvious that the effect of an ellipse and a circle is different.