Implementation of linear color gradient in CSS3

This article mainly introduces some implementation methods of linear color gradient in CSS3, including the WebKit kernel of safari and chrome and the Gecko kernel of Firefox, and the friends you need can refer to the following

The practice of creating a picture for a gradient is inflexible and will soon become a bad practice. But unfortunately, as of this writing, it may have to be done, but hopefully it won't last too long. Thanks to Firefox and Safari/chrome, we can now use the least effort to achieve a powerful gradient. In this article, we'll show a simple implementation of CSS gradients and the difference between this property and the Mozilla and WebKit kernel browsers.

Webkit

Although Mozilla and WebKit usually take the same syntax for the CSS3 attribute, they are unfortunately unable to agree on gradients. WebKit is the first browser kernel that supports gradients, which uses the following structure:

/* syntax, reference from: http://webkit.org/blog/175/introducing-css-gradients/*/-webkit-gradient (<TYPE>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)   /* Actual usage ... */background:-webkit-gradient (linear, 0 0, 0 100%, from (red), to (blue));

Don't worry about these grammar will let you see preoccupied, I also like this! Just remember that we need to use a comma to separate this parameter group.

Type of gradient? (linear)
x Y coordinate of the start of the gradient (0 0– or Left-top)
x Y coordinate of the end of the gradient (0 100% or Left-bottom)
The color of the start? (from (red))
The color of the end? (to (blue))

Mozilla

Firefox, starting with version 3.6, supports gradients and prefers a slightly different syntax to WebKit.

/* syntax, reference from: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/*/-moz-linear-gradient ([<point> | | < Angle>,]? <stop>, <stop> [, <stop>]*)    /* Actual usage */background:-moz-linear-gradient (Top, red, blue);

Notice that we put the gradient type--linear--in the attribute prefix.
Where does the gradient start? (top– we can also use degrees, such as -45DEG)
The color of the start? (red)
The color of the end? (blue)

Color-stops

What if you don't need a 100% gradient from one color to another? This is the time for color stop to work. A common design technique is to use a shorter and finer gradient, such as:

Note the light gray to white on the top of the small gradient

In the past, the standard practice was to make a picture, set it as a background image of an element, and then tile it horizontally. However, using CSS3, this is a small case.

Background:white; /* Set alternate properties for older or unsupported browsers */background:-moz-linear-gradient (Top, #dedede, white 8);     Background:-webkit-gradient (linear, 0 0, 0 8, from (#dedede), to (white)); border-top:1px solid white;

This time, we let the gradient end at 8% instead of the default of 100%. Please note that we also use a border in the head to form a contrast. This is very common.

If we want to add more than one color, we can do this:

Background:white; /* Alternate attribute */background:-moz-linear-gradient (top, #dedede, white 8, red 20%); background:-webkit-gradient (linear, 0 0, 0 100%, from (#dedede), Color-stop (8%, White), Color-stop (20%, red);

For the-moz version, we define, starting from the height of the element 20% is red.
For-webkit, we use the color-stop, which takes two parameters: where to start stopping and which color to use.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!