Home > Developer > CSS

CSS3 radial gradient (radial-gradient)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

CSS3 radial gradient (radial-gradient)

The previous article introduced CSS3 linear gradient (linear-gradient). This article will introduce radial-gradient (radial gradient) and repeated gradient (linear repetition and 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.

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

. Code
  1. -Moz-radial-gradient ([ |,]? [ | ,]? , [, ] *);
  2. -Webkit-radial-gradient ([ |,]? [ | ,]? , [, ] *);

    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 mainly compare the specific usage of CSS3 radial gradient through different examples. We will share a best UI front-end framework!

    Example 1:

    . Code
    1. Background:-moz-radial-gradient (# ace, # f96, # 1E90FF );
    2. Background:-webkit-radial-gradient (# ace, # f96, # 1E90FF );

      Effect:

      Example 2:

      . Code
      1. Background:-moz-radial-gradient (# ace 5%, # f96 25%, # 1E90FF 50% );
      2. 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. Share the best UI front-end framework!

        Example 3:

        . Code
        1. Background:-moz-radial-gradient (bottom left, circle, # ace, # f96, # 1E90FF );
        2. Background:-webkit-radial-gradient (bottom left, circle, # ace, # f96, # 1E90FF );

          The effect is as follows:

          Example 4:

          . Code
          1. Background:-moz-radial-gradient (bottom left, ellipse, # ace, # f96, # 1E90FF );
          2. 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:

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

              The effect is as follows:

              Example 6:

              . Code
              1. Background:-moz-radial-gradient (ellipse farthest-corner, # ace, # f96 10%, # 1E90FF 50%, # f96 );
              2. 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. Share the best UI front-end framework!

                Example 7:

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

                  The effect is as follows:

                  Example 8:

                  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:

                  . Code
                  1. Background:-moz-radial-gradient (# ace, # f96, # 1E90FF );
                  2. Background:-webkit-radial-gradient (# ace, # f96, # 1E90FF );

                    The effect is as follows:

                    Example 10:

                    . Code
                    1. Background:-moz-radial-gradient (contain, # ace, # f96, # 1E90FF );
                    2. 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. Share the best UI front-end framework!

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

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

                        The effect is as follows:

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

                        . Code
                        1. /* Firefox 3.6 + */
                        2. /*-Moz-radial-gradient ([|,]? [|,]? , [,] *) */
                        3. Background:-moz-radial-gradient (80% 20%, closest-corner, # ace, # f96 );
                        4. /* Safari 4-5, Chrome 1-9 */
                        5. Background:-webkit-gradient (radial, 80% 20%, 0, 80% 40%, 100, from (# ace), to (# f96 ));
                        6. /* Safari 5.1 +, Chrome 10 + */
                        7. 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.Repeating Gradient).

                          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. Share the best UI front-end framework!

                          . Code
                          1. Background:-moz-repeating-radial-gradient (# ace, # ace 5px, # f96 5px, # f96 10px );
                          2. Background:-webkit-repeating-radial-gradient (# ace, # ace 5px, # f96 5px, # f96 10px );
                          3. Background:-moz-repeating-linear-gradient (top left-45deg, # ace, # ace 5px, # f96 5px, # f96 10px );
                          4. 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:

                            . Code

                              CSS code:

                              . Code
                              1. Ul {
                              2. Overflow: hidden;
                              3. Margin-top: 20px;
                              4. }
                              5. Li {
                              6. Width: 150px;
                              7. Height: 80px;
                              8. Margin-bottom: 10px;
                              9. Float: left;
                              10. Margin-right: 5px;
                              11. Background: # ace;
                              12. /* Controls the size */
                              13. -Webkit-background-size: 20px 20px;
                              14. -Moz-background-size: 20px 20px;
                              15. Background-size: 20px 20px;
                              16. }
                              18. Li. gradient1 {
                              19. Background-image:-webkit-gradient (
                              20. Linear,
                              21. 0 100%, 100% 0,
                              22. Color-stop (. 25, rgba (255,255,255,. 2 )),
                              23. Color-stop (. 25, transparent ),
                              24. Color-stop (. 5, transparent ),
                              25. Color-stop (. 5, rgba (255,255,255,. 2 )),
                              26. Color-stop (. 75, rgba (255,255,255,. 2 )),
                              27. Color-stop (. 75, transparent ),
                              28. To (transparent)
                              29. );
                              30. Background-image:-moz-linear-gradient (
                              31. 45deg,
                              32. Rgba (255,255,255,. 2) 25%,
                              33. Transparent 25%,
                              34. Transparent 50%,
                              35. Rgba (255,255,255,. 2) 50%,
                              36. Rgba (255,255,255,. 2) 75%,
                              37. Transparent 75%,
                              38. Transparent
                              39. );
                              40. Background-image:-o-linear-gradient (
                              41. 45deg,
                              42. Rgba (255,255,255,. 2) 25%,
                              43. Transparent 25%,
                              44. Transparent 50%,
                              45. Rgba (255,255,255,. 2) 50%,
                              46. Rgba (255,255,255,. 2) 75%,
                              47. Transparent 75%,
                              48. Transparent
                              49. );
                              50. Background-image: linear-gradient (
                              51. 45deg,
                              52. Rgba (255,255,255,. 2) 25%,
                              53. Transparent 25%,
                              54. Transparent 50%,
                              55. Gba (255,255,255,. 2) 50%,
                              56. Rgba (255,255,255,. 2) 75%,
                              57. Transparent 75%,
                              58. Transparent
                              59. );
                              60. }
                              62. Li. gradient2 {
                              63. Background-image:-webkit-gradient (linear, 0 0,100% 100%,
                              64. Color-stop (. 25, rgba (255,255,255,. 2), color-stop (. 25, transparent ),
                              65. Color-stop (. 5, transparent), color-stop (. 5, rgba (255,255,255,. 2 )),
                              66. Color-stop (. 75, rgba (255,255,255,. 2), color-stop (. 75, transparent ),
                              67. To (transparent ));
                              68. Background-image:-moz-linear-gradient (-45deg, rgba (255,255,255,. 2) 25%, transparent 25%,
                              69. Transparent 50%, rgba (255,255,255,. 2) 50%, rgba (255,255,255,. 2) 75%,
                              70. Transparent 75%, transparent );
                              71. Background-image:-o-linear-gradient (-45deg, rgba (255,255,255,. 2) 25%, transparent 25%,
                              72. Transparent 50%, rgba (255,255,255,. 2) 50%, rgba (255,255,255,. 2) 75%,
                              73. Transparent 75%, transparent );
                              74. Background-image: linear-gradient (-45deg, rgba (255,255,255,. 2) 25%, transparent 25%,
                              75. Transparent 50%, rgba (255,255,255,. 2) 50%, rgba (255,255,255,. 2) 75%,
                              76. Transparent 75%, transparent );
                              77. }
                              79. Li. gradient3 {
                              80. Background-image:-webkit-gradient (linear, 0 0, 0 100%, color-stop (. 5, rgba (255,255,255 ,. 2), color-stop (. 5, transparent), to (transparent ));
                              81. Background-image:-moz-linear-gradient (rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              82. Background-image:-o-linear-gradient (rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              83. Background-image: linear-gradient (rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              84. }
                              86. Li. gradient4 {
                              87. Background-image:-webkit-gradient (linear, 0 0,100% 0, color-stop (. 5, rgba (255,255,255 ,. 2), color-stop (. 5, transparent), to (transparent ));
                              88. Background-image:-moz-linear-gradient (0deg, rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              89. Background-image:-o-linear-gradient (0deg, rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              90. Background-image: linear-gradient (0deg, rgba (255,255,255,. 2) 50%, transparent 50%, transparent );
                              91. }
                              93. Li. gradient5 {
                              94. Background-image:-webkit-gradient (linear, 0 0,100% 100%, color-stop (. 25, #555), color-stop (. 25, transparent), to (transparent )),
                              95. -Webkit-gradient (linear, 0 100%, 100% 0, color-stop (. 25, #555), color-stop (. 25, transparent), to (transparent )),
                              96. -Webkit-gradient (linear, 0 0,100% 100%, color-stop (. 75, transparent), color-stop (. 75, #555 )),
                              97. -Webkit-gradient (linear, 0 100%, 100% 0, color-stop (. 75, transparent), color-stop (. 75, #555 ));
                              98. Background-image:-moz-linear-gradient (45deg, #555 25%, transparent 25%, transparent ),
                              99. -Moz-linear-gradient (-45deg, #555 25%, transparent 25%, transparent ),
                              100. -Moz-linear-gradient (45deg, transparent 75%, #555 75% ),
                              101. -Moz-linear-gradient (-45deg, transparent 75%, #555 75% );
                              102. Background-image:-o-linear-gradient (45deg, #555 25%, transparent 25%, transparent ),
                              103. -O-linear-gradient (-45deg, #555 25%, transparent 25%, transparent ),
                              104. -O-linear-gradient (45deg, transparent 75%, #555 75% ),
                              105. -O-linear-gradient (-45deg, transparent 75%, #555 75% );
                              106. Background-image: linear-gradient (45deg, #555 25%, transparent 25%, transparent ),
                              107. Linear-gradient (-45deg, #555 25%, transparent 25%, transparent ),
                              108. Linear-gradient (45deg, transparent 75%, #555 75% ),
                              109. Linear-gradient (-45deg, transparent 75%, #555 75% );
                              110. }
                              112. Li. gradient6 {
                              113. 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 ))),
                              114. -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 )));
                              115. Background-image:-moz-linear-gradient (transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 )),
                              116. -Moz-linear-gradient (0deg, transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 ));
                              117. Background-image:-o-linear-gradient (transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 )),
                              118. -O-linear-gradient (0deg, transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 ));
                              119. Background-image: linear-gradient (transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 )),
                              120. Linear-gradient (0deg, transparent 50%, rgba (200, 0, 0,. 5) 50%, rgba (200, 0, 0,. 5 ));
                              121. }

                                Effect: share the best UI front-end framework!

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

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
background radial gradient background radial gradient radial ecommerce gradient brush linear gradient gradient ui draw gradient
Related Article
Web page production of CSS Super Skill big Broadcast collection
Create animations using @keyframes in CSS3, examples
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More