"CSS3" notes--gradient design (II.)

CSS gradient design for Gecko engine linear gradient basic syntax

-moz-linear-gradient ([<point> | | <angle>,]?<stop>,<stop>[,<stop>]*)

Parameter description:

<point>: Defines the starting point of the gradient, with values that include values, percentages, or keywords, where the left,center and right keywords define x-axis coordinates, and the top,center and bottom keywords define y-axis coordinates. When you specify a value, the other value defaults to center.

<ANGLE>: Defines the angle of the line gradient. Units include Deg,grad (gradient, 90 degrees = 100grad), rad (radians, one lap equals 2*pi rad).

<STOP>: Defines the step, which is similar to the color-stop () function of the WebKit engine, but does not need to call the function and simply passes the function. The first parameter sets the color, can be any legal color value, the second value sets the position of the color, the value is a percentage (0~100%) or a number, you can omit the step setting.

Basic usage of linear gradients

/* The simplest linear gradient, which requires only the start and end colors to be specified, the linear gradient is implemented by default from top to bottom */background:-moz-linear-gradient (red, blue);

Demo Effect:

/* Gradient from top left to bottom right, where top keyword sets the x-axis of the starting point and left keyword sets the y-coordinate of the starting point */
Background:-moz-linear-gradient (top left,red, blue)

Demo Effect:

/* Set a left-to-right multicolored gradient where y-axis coordinates default to center, and multiple color scales are displayed on average by step size */background:-moz-linear-gradient (left, red, orange, yellow, green, blue, Indigo, violet);

Demo Effect:

/* Red gradient from upper left to lower right, where red fades and eventually shows transparent */background:-moz-linear-gradient (Top Ieft, Red, Rgba (255,0,0,0));

Demo Effect:

/* Set angle value */background:-moz-linear-gradient (0deg, Red, Rgba (255,0,0,0));

Demo Effect:

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

/* Color gradient from top to bottom, where 80% of the Y axis, add a green color mark, design a three-color gradient effect. If no position is specified, the tri-color will be evenly distributed */background:-moz-linear-gradient (Top, blue, green 80%, orange);

Demo Effect:

/* Design a background image of the gradient translucent effect, covering a layer of gradient fill layer from left to right on top of 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 for radial gradients

-moz-radial-gradient ([<position> | | <angle>,]?[ Shape] | | <size>,]? <syop>,<stop>[,<stop>]*)

The parameter description of the function:

<point>: Defines the starting point of the gradient, with values that include values, percentages, or keywords, where the left,center and right keywords define x-axis coordinates, and the top,center and bottom keywords define y-axis coordinates. When you specify a value, the other value defaults to center.

<ANGLE>: Defines the angle of the line gradient. Units include Deg,grad (gradient, 90 degrees = 100grad), rad (radians, one lap equals 2*pi rad).

<STOP>: Defines the step, which is similar to the color-stop () function of the WebKit engine, but does not need to call the function and simply passes the function. The first parameter sets the color, can be any legal color value, the second value sets the position of the color, the value is a percentage (0~100%) or a number, you can omit the step setting.

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

Basic syntax for radial gradients

/* The simplest radial gradient, from the middle outward from the red, yellow to blue gradient display */background:-moz-radial-gradient (red, yellow, blue);

Demo Effect:

/* The simplest radial gradient, displayed from the middle outward by a red, yellow blue gradient, and sets the display position of the different colors */background:-moz-radial-gradient (red 20%, yellow 30%, Blue 40%);

Demo Effect:

/* Radial gradient, from the lower left to the red, yellow, blue gradient, and set the blue color display position */background:-moz-radial-gradient (bottom left, red, yellow, blue 80%);

Display effect:

/* Radial gradient with a rounded shape. From the middle of the left, the red, yellow, and blue gradients appear, and the blue color of the cursor is set to display the position */background:-moz-radial-gradient (left, circle, red, yellow, blue 50%);

Demo Effect:

/* Radial gradient, shape is oval. From the middle outward from the red, yellow to blue gradient display, and set the gradient size to 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. Use these keywords to define the size of the radial gradient.

In addition, the Gecko engine defines the-moz-repeating-linear-gradient and-moz-repeating-radial-gradient two properties that define a repeating line gradient and a repeating 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:

Application of gradients

<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/><title>webkit engine application </title><style type=" Text/css ">body {/* page initialization */ Background-color: #454545; Margin:1em; padding:0;}. box {/* Design module Style */-moz-border-radius:10px;/* design fillet */-moz-box-shadow:0 0 12px 1px rgba (205, 205, 205, 1);/* Design shadow Effects */border: 1px solid black; padding:10px; max-width:600px;/* Maximum width display */margin:auto;/* Center display */text-shadow:black 1px 2px 2px;/* Design text contains shadows */Color:white; Background-image:-moz-linear-gradient (Bottom, black, Rgba (0, N, 94, 0.2), white); /* Design Linear gradient background */Background-color:rgba (43, 43, 43, 0.5);}. Box:hover {/* When designing the mouse, enlarge the shadow Brightness */-moz-box-shadow:0 0 12px 5px rgba (205, 205, 205, 1);} H2 {/* add extra content in front of the title */font-size:120%; font-weight:bold; text-decoration:underline;} H2:before {content: "title:";} p {padding:6px; text-indent:2em; line-height:1.8em; font-size:14px;} </style>
Demo Effect: