CSS3 classic tutorial series: CSS3 radial gradient (radial-gradient)

The previous article on CSS3 classic tutorial Series introducedLinear-gradient(Linear gradient). This article will introduce youRadial-gradient(Radial gradient) and repeated gradient (linear repetition, radial repetition ). In the past, gradient effects were made into images like shadows and rounded corners. Currently, CSS 3 can be directly written for implementation.

Articles you may be interested in

• Recommended articles for Web developers and designers
• 20 brilliant CSS3 feature application demonstrations
• 35 amazing CSS3 animation demos
• 12 beautiful CSS3 button implementation schemes are recommended.
• The Ultimate Collection of 24 practical CSS3 tools

 

CSS3 radial gradient and linear gradient are very similar. Let's first look at its syntax:

-moz-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*); -webkit-radial-gradient([<bg-position> || <angle>,]? [<shape> || <size>,]? <color-stop>, <color-stop>[, <color-stop>]*);

Apart from the starting position, direction, and color that you have seen in a linear gradient, the radial gradient allows you to specify the shape (circular or elliptical) and size (closest end, closest angle, the far-end, farthest-angle, including or covering (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover )). Color stops: Like linear gradient, you should define the starting and ending colors of the gradient along the gradient line. In order to better understand its specific usage, we will use different examples to compare the specific usage of CSS3 radial gradient.

Example 1:

background: -moz-radial-gradient(#ace, #f96, #1E90FF);background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

Effect:

　　

Example 2:

background: -moz-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);background: -webkit-radial-gradient(#ace 5%, #f96 25%, #1E90FF 50%);

The effect is as follows:

　　

From the code in the above two examples, we found that they wanted the same starting and ending colors, but in example 2, we located some data. Why is this big difference? In fact, although the radial gradient has the same starting and ending colors, but when no position is set, the default color is the even interval, which is the same as the linear gradient above, however, when the gradient position is set, the gradient will be taken according to the gradient position. This is the difference between the sample and the example: although the circle has the same starting and ending colors, however, in Example 1, a gradient with a uniform color interval is selected by default, while in example 2, each color has a specific position.

Example 3:

background: -moz-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);background: -webkit-radial-gradient(bottom left, circle, #ace, #f96, #1E90FF);

The effect is as follows:

　　

Example 4:

background: -moz-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);background: -webkit-radial-gradient(bottom left, ellipse, #ace, #f96, #1E90FF);

The effect is as follows:

　　

In Example 3 and example 4, we can see from the effect that the shape is different. In the example, the three-way circle and the four-way elliptical shape are also known as their differences in shape. However, when we return to the code of the two examples, it is clear that in the example 3, the shape is set to circle, and in the example 4, ellipse, in other words, in the radial gradient, we can set its shape.

Example 5:

background: -moz-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);background: -webkit-radial-gradient(ellipse closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

The effect is as follows:

　　

Example 6:

background: -moz-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);background: -webkit-radial-gradient(ellipse farthest-corner, #ace, #f96 10%, #1E90FF 50%, #f96);

The effect is as follows:

　　

From the code in Example 5 and Example 6, we can clearly understand that in Example 5, we applied closest-side and farthest-corner in Example 6. In this way, we can also set the Size for the radial gradient: different options of size (closest-side, closest-corner, farthest-side, farthest-corner, contain or cover) points to the point used to define the circle or elliptical size. For example, the near-side of an elliptic V. S. has different sizes. Example 5 is the distance from the starting point (center) to the near edge, and Example 6 is the distance from the starting point to the far angle.

Example 7:

background: -moz-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);background: -webkit-radial-gradient(circle closest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

The effect is as follows:

　　

Example 8:

background: -moz-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);background: -webkit-radial-gradient(circle farthest-side, #ace, #f96 10%, #1E90FF 50%, #f96);

The effect is as follows:

　　

Example 7 and Example 8 demonstrate the circle's near edge VS far edge. The gradient size of the circle in Example 7 is determined by the distance from the start point (center) to the near edge, the circle in Example 8 is determined by the distance from the starting point to the far edge.

Example 9:

background: -moz-radial-gradient(#ace, #f96, #1E90FF);background: -webkit-radial-gradient(#ace, #f96, #1E90FF);

The effect is as follows:

　　

Example 10:

background: -moz-radial-gradient(contain, #ace, #f96, #1E90FF);background: -webkit-radial-gradient(contain, #ace, #f96, #1E90FF);

The effect is as follows:

　　

Example 9 and Example 10 demonstrate circle inclusion. Here you can see the default circle of Example 9, which is the same gradient version but contains the circle of Example 10.

Finally, let's take a look at two instances: Application Center positioning and full sized, as shown below:

/* Firefox 3.6+ */  background: -moz-radial-gradient(circle, #ace, #f96);  /* Safari 4-5, Chrome 1-9 */  /* Can't specify a percentage size? Laaaaaame. */  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#ace), to(#f96));  /* Safari 5.1+, Chrome 10+ */  background: -webkit-radial-gradient(circle, #ace, #f96);   

The effect is as follows:

　　

The following example applies Positioned and Sized. See the code and results:

/* Firefox 3.6+ */ /* -moz-radial-gradient( [ || ,]? [ || ,]? , [, ]* ) */background: -moz-radial-gradient(80% 20%, closest-corner, #ace, #f96); /* Safari 4-5, Chrome 1-9 */background: -webkit-gradient(radial, 80% 20%, 0, 80% 40%, 100, from(#ace), to(#f96)); /* Safari 5.1+, Chrome 10+ */background: -webkit-radial-gradient(80% 20%, closest-corner, #ace, #f96);

The effect is as follows:

　　

We have finished introducing the two gradient methods of CSS3. Let's take a look at CSS3.Repeated gradient(Repeating Gradient) Application.

If you want to repeat a gradient, you can use-moz-repeating-linear-gradient (repeating linear gradient) and-moz-repeating-radial-gradient (repeating radial gradient ). In the following example, each instance specifies two start and end colors and repeats infinitely.

background: -moz-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);background: -webkit-repeating-radial-gradient(#ace, #ace 5px, #f96 5px, #f96 10px);background: -moz-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);background: -webkit-repeating-linear-gradient(top left -45deg, #ace, #ace 5px, #f96 5px, #f96 10px);

Effect:

There is something about CSS3 gradient. After reading it, you will surely think about it. What aspects does it mainly use? This is much more. The simplest thing is to create a background. We can also use it to make some beautiful buttons and use it to make patterns, here I will list several sample codes for creating patterns:

HTML code:

<ul>   <li class="gradient gradient1"></li>   <li class="gradient gradient2"></li>   <li class="gradient gradient3"></li>   <li class="gradient gradient4"></li>   <li class="gradient gradient5"></li>   <li class="gradient gradient6"></li></ul>

CSS code:

ul {  overflow: hidden;  margin-top: 20px;}li{  width: 150px;  height: 80px;  margin-bottom: 10px;  float: left;  margin-right: 5px;  background: #ace;  /*Controls the size*/  -webkit-background-size: 20px 20px;  -moz-background-size: 20px 20px;  background-size: 20px 20px; }    li.gradient1 {  background-image: -webkit-gradient(    linear,    0 100%, 100% 0,    color-stop(.25, rgba(255, 255, 255, .2)),     color-stop(.25, transparent),    color-stop(.5, transparent),     color-stop(.5, rgba(255, 255, 255, .2)),    color-stop(.75, rgba(255, 255, 255, .2)),     color-stop(.75, transparent),    to(transparent)    );  background-image: -moz-linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     rgba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent    );  background-image: -o-linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     rgba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent  );  background-image: linear-gradient(    45deg,     rgba(255, 255, 255, .2) 25%,     transparent 25%,    transparent 50%,     gba(255, 255, 255, .2) 50%,     rgba(255, 255, 255, .2) 75%,    transparent 75%,     transparent    );}li.gradient2 {   background-image: -webkit-gradient(linear, 0 0, 100% 100%,      color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent),      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)),      color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent),      to(transparent));   background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);   background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);   background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,      transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,      transparent 75%, transparent);}    li.gradient3 {  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}    li.gradient4 {  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));  background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);  background-image: linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);}    li.gradient5 {  background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));  background-image: -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),     -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),     -moz-linear-gradient(45deg, transparent 75%, #555 75%),     -moz-linear-gradient(-45deg, transparent 75%, #555 75%);  background-image: -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),     -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),     -o-linear-gradient(45deg, transparent 75%, #555 75%),     -o-linear-gradient(-45deg, transparent 75%, #555 75%);  background-image: linear-gradient(45deg, #555 25%, transparent 25%, transparent),    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),    linear-gradient(45deg, transparent 75%, #555 75%),    linear-gradient(-45deg, transparent 75%, #555 75%);}    li.gradient6 {  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),     -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));  background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  background-image: -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));  background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),     linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));}

Effect:

　　

Good results, of course, interested friends can come here to learn more about different effects.

Articles you may be interested in

• CSS3 Media Queries implement responsive design
• CSS3 Tutorials: CSS3 rounded corners
• CSS3 Tutorials: CSS3 shadow details
• CSS3 Tutorials: CSS3 RGBA details
• CSS3 Tutorials: CSS3 linear gradient

 

Link to this article: CSS3 getting started Tutorial: CSS3 radial gradient (sorted from: W3CPLUS)

Source: Dream sky ◆ focus on Web Front-end development technology ◆ share Web design resources