CSS3 linear gradient (linear-gradient)

CSS3 linear gradient (linear-gradient)

CSS3 Gradient is divided into linear-gradient (linear gradient) and radial-Gradient (radial gradient ). Today, we mainly analyze the specific usage of linear gradient. To better apply CSS3 Gradient, we need to first understand the current kernels of several modern browsers, including Mozilla (Firefox, Flock, etc.), WebKit (Safari, Chrome, etc) opera and Trident ).

This article ignores IE as usual. We mainly look at the applications in Mozilla, Webkit, and Opera. Of course, it can also be implemented in IE. It needs to be implemented through the unique filter of IE, the filter usage syntax will be listed later, but it will not detail how to use it. If you are interested, you can search for related technical documents. A front-end UI framework that can improve development efficiency by 500%!

1. Application of Linear Gradient in Mozilla

Syntax:

. Code

1. -Moz-linear-gradient ([ |,]? , [, ] *)

   Parameters: There are three parameters in total. The first parameter indicates the direction of the linear gradient. top is from top to bottom and left is from left to right. If it is defined as left top, that is, from the upper left corner to the lower right corner. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors. :

   Based on the above introduction, let's take a simple example:

   HTML:

   . Code

   1. CSS:

      . Code
      1. . Example {
      2. Width: 150px;
      3. Height: 80px;
      4. }

         Unless otherwise stated, the examples below are the basic code for applying this section of html and css.

         Now we apply a simple gradient style to this div:

         . Code
         1. . Example1 {
         2. Background:-moz-linear-gradient (top, # ccc, #000 );
         3. }

            The effect is as follows:

            II. Application of Linear Gradient in Webkit

            Syntax: a front-end UI framework that can improve development efficiency by 500%!

            . Code
            1. -Webkit-linear-gradient ([ |,]? , [, ] *) // The latest release writing syntax
            2. -Webkit-gradient ( , [, ]?, [, ]? [, ] *) // Old-fashioned syntax writing rules

               Parameters:-Webkit-gradient is the implementation parameter of the webkit engine for gradient. There are five parameters in total. The first parameter indicates the gradient type (type), which can be linear (linear gradient) or radial (radial gradient ). The second and third parameters are both a pair of values, indicating the gradient start point and end point respectively. These values can be expressed in coordinates or key values, such as left top (upper left corner) and left bottom (lower left corner ). The fourth and fifth parameters are two color-stop functions. The color-stop function accepts two parameters. The first parameter indicates the gradient position. 0 indicates the starting point, 0.5 indicates the midpoint, and 1 indicates the ending point. The second parameter indicates the color of the gradient. :

               Let's take a look at an old-fashioned example: <喎?http: www.bkjia.com kf ware vc " target="_blank" class="keylink"> VcD4KCgoKLrT6wusgIDxpbWcgY2xhc3M9 "star" src = "http://www.bkjia.com/uploads/allimg/140917/04300V023-0.png" alt = "add to favorites code">

               1. Background:-webkit-gradient (linear, center top, center bottom, from (# ccc), to (#000 ));

                  The effect is as follows:

                  Next, let's take a look at the new writing method:

                  . Code
                  1. -Webkit-linear-gradient (top, # ccc, #000 );

                     I will not post this effect, and everyone will understand it in the browser, whether they are consistent. By careful comparison, the syntaxes of Mozilla and Webkit are basically the same, but the differences between their prefixes. Of course, they can be unified to the same one day, which is of course better for us.

                     Iii. Application of Linear Gradient in Opera

                     Syntax:

                     . Code
                     1. -O-linear-gradient ([ |,]? , [, ]);/* Operators' 11.10 + */

                        Parameters:-O-linear-gradient has three parameters. The first parameter indicates the direction of the linear gradient, top is from top to bottom, left is from left to right, if defined as left top, it is from top left to bottom right. The second and third parameters are the start color and end color respectively. You can also insert more parameters between them to indicate gradient of multiple colors. (Note: The versions supported by Opera are limited. This test is in Opera11.1 and will not be prompted later.): a front-end UI framework that can improve development efficiency by 500%!

                        Sample Code:

                        . Code
                        1. Background:-o-linear-gradient (top, # ccc, #000 );

                           Effect:

                           Iv. Application of Linear Gradient in Trident (IE)

                           Syntax:

                           . Code
                           1. Filter: progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = # 1471da, endColorstr = # 1C85FB);/* IE <9> */
                           2. -Ms-filter: "progid: DXImageTransform. Microsoft. gradient (GradientType = 0, startColorstr = # 1471da, endColorstr = # 1C85FB)";/* IE8 + */

                              IE uses a filter to implement gradient. StartColorstr indicates the starting point color, and endColorstr indicates the ending point color. GradientType indicates the gradient type. 0 is the default value, indicating the vertical gradient. 1 indicates the horizontal gradient. :

                              The above describes the implementation methods of linear gradient in the above four core modules. Next we will mainly implement various linear gradient instances in the Mozilla, Webkit, and Opera modules:

                              From the above syntax, we can clearly understand that to create a linear gradient, we need to create a starting point and a gradient direction (or angle) to define a starting color: A front-end UI framework that can improve development efficiency by 500%!

                              . Code
                              1. -Moz-linear-gradient ([ |,]? , [, ] *)
                              2. -Webkit-linear-gradient ([ |,]? , [, ] *)
                              3. -O-linear-gradient ([ |,]? , [, ] *)

                                 The specific application is as follows:

                                 . Code
                                 1. Background:-moz-linear-gradient (left, # ace, # f96);/* Mozilla */
                                 2. Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96);/* Old gradient for webkit */
                                 3. Background:-webkit-linear-gradient (left, # ace, # f96);/* new gradient for Webkit */
                                 4. Background:-o-linear-gradient (left, # ace, # f96);/* Opera11 */

                                    The effect is as follows:

                                    Starting Point works in a way similar to background position. You can set the horizontal and vertical positions as percentages, or in pixels, or use left/center/right in the horizontal direction, you can use top/center/bottom in the vertical direction. The position starts in the upper left corner. If you do not specify a horizontal or vertical position, the default value is center. It mainly works in the following ways: Top → Bottom, Left → Right, bottom → top, right → left, etc. Then we mainly look at its implementation effect in one way:

                                    1. Starting from center (horizontal direction) and top (vertical direction), that is, Top → Bottom:

                                    . Code
                                    1. /* Firefox 3.6 + */
                                    2. Background:-moz-linear-gradient (top, # ace, # f96 );
                                    3. /* Safari 4-5, Chrome 1-9 */
                                    4. /*-Webkit-gradient (, [,]?, [,]? [,] *) */
                                    5. Background:-webkit-gradient (linear, top, from (# ace), to (# f96 ));
                                    6. /* Safari 5.1 +, Chrome 10 + */
                                    7. Background:-webkit-linear-gradient (top, # ace, # f96 );
                                    8. /* Operators' 11.10 + */
                                    9. Background:-o-linear-gradient (top, # ace, # f96 );

                                       Effect:

                                       2. Start with left (horizontal direction) and center (vertical direction). Left → Right:

                                       . Code
                                       1. /* Firefox 3.6 + */
                                       2. Background:-moz-linear-gradient (left, # ace, # f96 );
                                       3. /* Safari 5.1 +, Chrome 10 + */
                                       4. Background:-webkit-linear-gradient (left, # ace, # f96 );
                                       5. /* Operators' 11.10 + */
                                       6. Background:-o-linear-gradient (left, # ace, # f96 );

                                          The effect is as follows:

                                          3. Start with left (horizontal direction) and top (vertical direction): a front-end UI framework that can improve development efficiency by 500%!

                                          . Code
                                          1. Background:-moz-linear-gradient (left top, # ace, # f96 );
                                          2. Background:-webkit-linear-gradient (left top, # ace, # f96 );
                                          3. Background:-o-linear-gradient (left top, # ace, # f96 );

                                             The effect is as follows:

                                             4. Linear Gradient (with Even Stops ):

                                             . Code
                                             1. /* Firefox 3.6 + */
                                             2. Background:-moz-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );
                                             3. /* Safari 4-5, Chrome 1-9 */
                                             4. Background:-webkit-gradient (linear, left top, right top, from (# ace), color-stop (0.25, # f96), color-stop (0.5, # ace), color-stop (0.75, # f96), to (# ace ));
                                             5. /* Safari 5.1 +, Chrome 10 + */
                                             6. Background:-webkit-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );
                                             7. /* Operators' 11.10 + */
                                             8. Background:-o-linear-gradient (left, # ace, # f96, # ace, # f96, # ace );

                                                The effect is as follows:

                                                5. with Specified Arbitrary Stops:

                                                . Code
                                                1. /* Firefox 3.6 + */
                                                2. Background:-moz-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );
                                                3. /* Safari 4-5, Chrome 1-9 */
                                                4. Background:-webkit-gradient (linear, left top, right top, from (# ace), color-stop (0.05, # f96), color-stop (0.5, # ace), color-stop (0.95, # f96), to (# ace ));
                                                5. /* Safari 5.1 +, Chrome 10 + */
                                                6. Background:-webkit-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );
                                                7. /* Operators' 11.10 + */
                                                8. Background:-o-linear-gradient (left, # ace, # f96 5%, # ace, # f96 95%, # ace );

                                                   The effect is as follows:

                                                   6. Angle ):

                                                   As shown in the preceding example, if you do not specify an angle, it is automatically defined based on the starting position. If you want to control the gradient direction more, try setting the angle. For example, the following two gradients have the same starting point left center, but a 30 degree angle is added. A front-end UI framework that can improve development efficiency by 500%!

                                                   Sample Code with no angle:

                                                   . Code
                                                   1. Background:-moz-linear-gradient (left, # ace, # f96 );
                                                   2. Background:-webkit-linear-gradient (left, # ace, # f96 );
                                                   3. Background:-o-linear-gradient (left, # ace, # f96 );

                                                      Add 30-degree angle code:

                                                      . Code
                                                      1. Background:-moz-linear-gradient (left 30deg, # ace, # f96 );
                                                      2. Background:-webkit-gradient (linear, 0 0,100% 100%, from (# ace), to (# f96 ));
                                                      3. Background:-o-linear-gradient (30deg, # ace, # f96 );

                                                         As follows:

                                                         When the angle is specified, remember that it is an angle generated by the horizontal line and the gradient line, which is counterclockwise. Therefore, using 0deg produces a left-to-right horizontal gradient, and 90 degrees creates a vertical gradient from the bottom to the top. Let's take a look at your core code:

                                                         . Code
                                                         1. Background:-moz-linear-gradient (, # ace, # f96 );
                                                         2. Background:-webkit-gradient ( , From (# ace), to (# f96 ));
                                                         3. Background:-webkit-linear-gradient (, # ace, # f96 );
                                                         4. Background:-o-linear-gradient (, # ace, # f96 );

                                                            Let's take a look at the differences between different angles:

                                                            . Code
                                                            1. . Deg0 {
                                                            2. Background:-moz-linear-gradient (0deg, # ace, # f96 );
                                                            3. Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96 ));
                                                            4. Background:-webkit-linear-gradient (0deg, # ace, # f96 );
                                                            5. Background:-o-linear-gradient (0deg, # ace, # f96 );
                                                            6. }
                                                            8. . Deg45 {
                                                            9. Background:-moz-linear-gradient (45deg, # ace, # f96 );
                                                            10. Background:-webkit-gradient (linear, 0 100%, 100% 0%, from (# ace), to (# f96 ));
                                                            11. Background:-webkit-linear-gradient (45deg, # ace, # f96 );
                                                            12. Background:-o-linear-gradient (45deg, # ace, # f96 );
                                                            13. }
                                                            14. . Deg90 {
                                                            15. Background:-moz-linear-gradient (90deg, # ace, # f96 );
                                                            16. Background:-webkit-gradient (linear, 50% 100%, 50% 0%, from (# ace), to (# f96 ));
                                                            17. Background:-webkit-linear-gradient (90deg, # ace, # f96 );
                                                            18. Background:-o-linear-gradient (90deg, # ace, # f96 );
                                                            19. }
                                                            20. . Deg135 {
                                                            21. Background:-moz-linear-gradient (135deg, # ace, # f96 );
                                                            22. Background:-webkit-gradient (linear, 100% 100%, 0 0, from (# ace), to (# f96 ));
                                                            23. Background:-webkit-linear-gradient (135deg, # ace, # f96 );
                                                            24. Background:-o-linear-gradient (135deg, # ace, # f96 );
                                                            25. }
                                                            26. . Deg180 {
                                                            27. Background:-moz-linear-gradient (180deg, # ace, # f96 );
                                                            28. Background:-webkit-gradient (linear, 100% 50%, 0 50%, from (# ace), to (# f96 ));
                                                            29. Background:-webkit-linear-gradient (180deg, # ace, # f96 );
                                                            30. Background:-o-linear-gradient (180deg, # ace, # f96 );
                                                            31. }
                                                            32. . Deg225 {
                                                            33. Background:-moz-linear-gradient (225deg, # ace, # f96 );
                                                            34. Background:-webkit-gradient (linear, 100% 0%, 0 100%, from (# ace), to (# f96 ));
                                                            35. Background:-webkit-linear-gradient (225deg, # ace, # f96 );
                                                            36. Background:-o-linear-gradient (225deg, # ace, # f96 );
                                                            37. }
                                                            38. . Deg270 {
                                                            39. Background:-moz-linear-gradient (270deg, # ace, # f96 );
                                                            40. Background:-webkit-gradient (linear, 50% 0%, 50% 100%, from (# ace), to (# f96 ));
                                                            41. Background:-webkit-linear-gradient (270deg, # ace, # f96 );
                                                            42. Background:-o-linear-gradient (270deg, # ace, # f96 );
                                                            43. }
                                                            44. . Deg315 {
                                                            45. Background:-moz-linear-gradient (315deg, # ace, # f96 );
                                                            46. Background:-webkit-gradient (linear, 0% 0%, 100% 100%, from (# ace), to (# f96 ));
                                                            47. Background:-webkit-linear-gradient (315deg, # ace, # f96 );
                                                            48. Background:-o-linear-gradient (315deg, # ace, # f96 );
                                                            49. }
                                                            50. . Deg360 {
                                                            51. Background:-moz-linear-gradient (360deg, # ace, # f96 );
                                                            52. Background:-webkit-gradient (linear, 0 50%, 100% 50%, from (# ace), to (# f96 ));
                                                            53. Background:-webkit-linear-gradient (360deg, # ace, # f96 );
                                                            54. Background:-o-linear-gradient (360deg, # ace, # f96 );
                                                            55. }

                                                                The effect is as follows:

                                                                In addition to the start position and angle, you should specify the start and end colors. The start and end colors are gradient edges that will contain the points of the specified color at the specified position (set in percentage or length. The starting and ending numbers of colors are infinite. If you use a percentage position, 0% indicates that the start point and 100% are the end points, but the values outside the area can be used to achieve the expected results. This is also the key to making a Gradient through CSS3 Gradient, which directly affects your design effect. The example here is not perfect, just to show you a gradient effect, let's use it first. Let's take a look at the example of different starting colors: a front-end UI framework that can improve development efficiency by 500%!

                                                                . Code
                                                                1. Background:-moz-linear-gradient (top, # ace, # f96 80%, # f96 );
                                                                2. Background:-webkit-linear-gradient (top, # ace, # f96 80%, # f96 );
                                                                3. Background:-o-linear-gradient (top, # ace, # f96 80%, # f96 );

                                                                   The effect is as follows:

                                                                   If no position is specified, the color is evenly distributed. Example:

                                                                   . Code
                                                                   1. Background:-moz-linear-gradient (left, red, # f96, yellow, green, # ace );
                                                                   2. Background:-webkit-linear-gradient (left, red, # f96, yellow, green, # ace );
                                                                   3. Background:-o-linear-gradient (left, red, # f96, yellow, green, # ace );

                                                                      The effect is as follows:

                                                                      7. Application Transparency on gradient (Transparency ):

                                                                      Transparent gradient is quite useful for creating some special effects, for example, when multiple backgrounds are stacked. Here is the combination of two backgrounds: an image, a linear gradient from white to transparent. Let's look at an example on the official website:

                                                                      . Code
                                                                      1. Background:-moz-linear-gradient (right, rgba (255,255,255, 0), rgba (255,255,255, 1), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg );
                                                                      2. Background:-webkit-linear-gradient (right, rgba (255,255,255, 0), rgba (255,255,255, 1), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg );
                                                                      3. Background:-o-linear-gradient (right, rgba (255,255,255, 0), rgba (255,255,255, 1), url (http://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg );

                                                                         Let's see the effect.