Use CSS3 to do linear gradient effects

The idea of creating a picture for a gradient is inflexible and will soon become a bad practice. Unfortunately, as of this article, it may be necessary to do so, but hope will not 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 you a simple implementation of CSS gradients and the differences between the attributes in Mozilla and WebKit kernel browsers.

PS: This article originally provided a video, but for well-known reasons, we can not watch this video on YouTube, want to see the students please do their own way to watch (Max 720P)

Webkit

Although Mozilla and WebKit often use the same syntax for CSS3 attributes, they unfortunately cannot agree on gradients. WebKit is the first browser kernel to support a gradient, which uses the following structure:

/* Grammar, reference from: http://webkit.org/blog/175/introducing-css-gradients/* *-webkit-gradient (, [,]?, [,]? [,]*)/* Practical usage ... * * background:-webkit-gradient (linear, 0 0, 0 100%, from (red), to (blue));

Do not worry about these grammar will make you see eye, I also like this! Just remember we need to use a comma to separate this argument group.

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

Mozilla

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

/* Grammar, reference from: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/* *-moz-linear-gradient ([,]?, [,]*)/* Practical usage * Background:-moz-linear-gradient (top, red, blue);

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

Color-stops

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

Note A small gradient of light gray to white at the top

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

Background:white; /* Set standby 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 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 (several) colors, we can do this:

Background:white; /* Standby Properties/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 that the starting point of the 20% height of the element is red.
• And for-webkit, we use Color-stop, with two parameters: where to start stopping and which color to use.

Ie

IE does not support CSS gradients, but provides a gradient filter to achieve the simplest gradient effects:

Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= "#ffffff", endcolorstr= "#ff0000"); /* Ie6,ie7/-ms-filter: Progid:DXImageTransform.Microsoft.gradient (startcolorstr= "#ffffff", endcolorstr= "#ff0000 ")"; * IE8 * *

PS: In fact, the IE solution we mentioned in "Rgba browser support" is to use this gradient filter.

Some important points about CSS gradients:

• Use it as much as possible. If IE users see a fixed solid color, I encourage you to use this method;
• IE6/7/8, Opera, Safari 3, and Firefox 3 can't render CSS3 gradients, Firefox and Safari users often upgrade browsers, and the Chrome automatic upgrade mechanism will automatically upgrade in the background, so this is not a big problem;
• Always apply a default, solid color background for browsers that do not support private properties of these browsers;
• Never use a red to blue gradient, as I used to do for example;
• Pages don't need to look exactly the same in every browser!
• Firefox can use angles to set the direction of the gradient, and WebKit can only use the coordinates of the x and Y axes.