"CSS3 Combat" notes--gradient Design (ii) _ Experience Exchange

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 a gradient, which contains a value, a percentage, or a keyword, where the left,center and right keywords define the x-coordinate, 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 a straight line gradient. Units include Deg,grad (gradient, 90 degrees = 100grad), rad (radians, one lap equals 2*pi rad).

<stop>: Defines the step size, which is similar to the color-stop () function of the WebKit engine, but this parameter does not require a function to be invoked, and the function can be passed directly. The first parameter sets the color, you can set the position of the color for any valid color value, the second value, a percentage (0~100%), or a numeric value, or you can omit the step setting.

Basic usage of linear gradients

background: -moz-linear-gradient(red, blue);

Demo Effect:

background: -moz-linear-gradient(top left,red, blue)

Demo Effect:

background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet);

Demo Effect:

background: -moz-linear-gradient(top left, red, rgba(255,0,0,0));

Demo Effect:

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 counterclockwise. Therefore, setting 0deg will produce a horizontal gradient from left to right, and setting 90 degrees will create a gradient from the bottom to the top.

background: -moz-linear-gradient(top, blue, green 80%, orange);

Demo Effect:

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 a gradient, which contains a value, a percentage, or a keyword, where the left,center and right keywords define the x-coordinate, 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 a straight line gradient. Units include Deg,grad (gradient, 90 degrees = 100grad), rad (radians, one lap equals 2*pi rad).

<stop>: Defines the step size, which is similar to the color-stop () function of the WebKit engine, but this parameter does not require a function to be invoked, and the function can be passed directly. The first parameter sets the color, you can set the position of the color for any valid color value, the second value, a percentage (0~100%), or a numeric value, or you can omit the step setting.

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

Basic syntax for radial gradients

background: -moz-radial-gradient(red, yellow, blue);

Demo Effect:

background: -moz-radial-gradient(red 20%, yellow 30%, blue 40%);

Demo Effect:

background: -moz-radial-gradient(bottom left, red, yellow, blue 80%);

Display effect:

background: -moz-radial-gradient(left, circle, red, yellow, blue 50%);

Demo Effect:

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 repeating line gradients and repeating radial gradients.

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:

The application of the gradient

<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 Effect/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 shadow/Color:white; Background-image:-moz-linear-gradient (Bottom, black, Rgba (0, N, 0.2), white); /* Design linear gradient background/Background-color:rgba (43, 43, 43, 0.5); Box:hover {* * design mouse through the magnification 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: