Notes on CSS3 practice-gradient design (ii) _ experience exchange

This article mainly introduces the notes of CSS3 practice-gradient design (2. For more information, see CSS gradient design of Gecko engine basic syntax of linear gradient

-moz-linear-gradient([
  
    || ,]?
   
    ,
    
     [,
     
      ]*)
     
    
   
  

Parameter description:

: Defines the starting point of the gradient. The values include numeric values, percentages, and keywords. The left, center, and right keywords define the x axis coordinates, top, center, and bottom keywords define the y axis coordinates. If one value is specified, the other value is center by default.

: Defines the angle of the straight line gradient. The Unit is deg, grad (gradient, 90 degrees = 100 grad), rad (radians, one circle equals 2 * PI rad ).

: Defines the step size. Its usage is similar to that of the color-stop () function of the Webkit engine. However, this parameter can be directly transferred without calling a function. The first parameter sets the color, which can be any valid color value, and the second value sets the color position. The value is 0 ~ 100%) or a value. You can also omit the step size setting.

Basic usage of linear gradient

/* The simplest linear gradient. You only need to specify the start color and end color. By default, the linear gradient is implemented from top to bottom */background: -moz-linear-gradient(red, blue);

Demo effect:

/* Gradient from the upper left corner to the lower right corner, where the top keyword sets the x-axis of the start point, and the left keyword sets the y-axis coordinate of the start point */background: -moz-linear-gradient(top left,red, blue)

Demo effect:

/* Set the gradient from left to right. the Y axis coordinates are center by default, and multiple color labels are evenly displayed by step */background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

Demo effect:

/* The Red gradient from the upper left corner to the lower right corner, where the red gradually fades and is eventually displayed as transparent */background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

Demo effect:

/* Set the angle value */background: -moz-linear-gradient(0deg, red, rgba(255,0,0,0));

Demo effect:

Summary: When the angle is specified, it is positioned along the horizontal line in a clockwise rotation. Therefore, setting 0deg will generate a horizontal gradient from left to right, and setting 90 degrees will create a gradient from the bottom to the top.

/* The colorful gradient from top to bottom. Add a green color mark at the position of 80% on the Y axis to design the three-color gradient effect. If no position is specified, the three colors are evenly distributed */background: -moz-linear-gradient(top, blue, green 80%, orange);

Demo effect:

/* Design a gradient translucent background image, covering a layer of white to transparent fill layer from left to right on the background image */background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(images/bg4.jpg);

Demo effect:

Basic Syntax of radial gradient

-moz-radial-gradient([
  
    || ,]?[shape] || 
   
    ,]? 
    
     ,
     
      [,
      
       ]*)
      
     
    
   
  

Parameter description of the function:

: Defines the starting point of the gradient. The values include numeric values, percentages, and keywords. The left, center, and right keywords define the x axis coordinates, top, center, and bottom keywords define the y axis coordinates. If one value is specified, the other value is center by default.

: Defines the angle of the straight line gradient. The Unit is deg, grad (gradient, 90 degrees = 100 grad), rad (radians, one circle equals 2 * PI rad ).

: Defines the step size. Its usage is similar to that of the color-stop () function of the Webkit engine. However, this parameter can be directly transferred without calling a function. The first parameter sets the color, which can be any valid color value, and the second value sets the color position. The value is 0 ~ 100%) or a value. You can also omit the step size setting.

: Defines the circle radius, or the axis length of the elliptic n

Basic Syntax of radial gradient

/* The simplest radial gradient. The gradient is displayed from red to yellow in the middle */background: -moz-radial-gradient(red, yellow, blue);

Demo effect:

/* The simplest radial gradient. The gradient is displayed from the middle to the outside in red and yellow, and the position of different colors is set */background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

Demo effect:

/* Radial gradient. The gradient is displayed in red, yellow, and blue from the lower left corner, and the position of the blue color is set */background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

Display Effect:

/* Radial gradient with a circular shape. From the middle of the left side, the gradient is displayed from red, yellow to blue, and the position of the blue color is set */background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);

Demo effect:

/* Radial gradient with an elliptical shape. Show the gradient from the middle to the outside in red, yellow to blue, and set the gradient size to the cover keyword */background: -moz-radial-gradient(ellipse cover, red, yellow, blue);

Demo effect:

Summary:
The size parameter contains multiple keywords: closest-side, closest-corner, farthest-side, farthest-corner, contain, and cover. You can use these keywords to define the size of a radial gradient.

In addition, the Gecko engine defines two attributes, namely-moz-repeating-linear-gradient and-moz-repeating-radial-gradient, to define repeated straight line gradient and repeated radial gradient.

background: -moz-repeating-radial-gradient(circle, black, black 10px, white 10px, white 20px);

Demo effect:

background: -moz-repeating-linear-gradient(top left 60deg,black, black 10px, white 10px, white 20px);

Demo effect:

Gradient Application

  Application of Webkit Engine
About text
I can get started quickly with whatever text I like. I used one day to read "My first intimate contact" and then wrote more than 20 thousand similar words the next day, so I was stunned by my classmates. Although I think there is almost no value for that kind of thing, time can easily overwhelm it with no trace.
 
I threw away the full score of my essay in the examination, but I bound the meaningless article that the teacher said and put it in the drawer. I often write down my own stories and show them to my classmates. Then they are moved to a mess.
 
......

Demo effect: