Using CSS3 to achieve a background color gradient

This article describes using CSS3 to implement background color gradients

CSS Color Gradient Concepts:

CSS gradient (gradients) allows us to modify a space-from one color to another-to fill the space with a color gradient effect. The gradient has two forms: linear (linear gradient) and radial (circular gradient). It is obvious that CSS gradient (gradients) technology produces a visual pattern effect, which is simple to achieve with simple programming. CSS gradient (gradients) was introduced early in CSS3, but the technology has been extended for a long time.

CSS gradient color (gradients) technology basic syntax:

Unified Code Format

Background-image:linear-gradient (<point> | | <angle>,]? <stop>, <stop> [, <stop>]*]

The first parameter is the starting point or corner of the gradient. The second parameter is a color stop point (color stops). You need at least two colors (start and end points), and you can add any color to increase the richness of the color gradient. The definition of a color stop can be a color, or a color plus a percentage:

/*  color-stop (percentage/amount, color) */color-stop (0.20, red)

The following code basically includes everything from top-down color gradients:

{/* background */background-color: #063053;/* Chrome, Safari 4+, multiple color stops */background-image:-webkit-gradient (line  AR, left bottom, left top, color-stop (0.32, #063053), Color-stop (0.66, #395873), Color-stop (0.83, #5c7c99));/* Chrome　　　　　5.1+, Safari */background-image:-webkit-linear-gradient (#063053, #395873, #5c7c99); /* Firefox;　　　　 Multiple color stops */background-image:-moz-linear-gradient (Top, #063053, #395873, #5c7c99); /* IE 6+ */filter:progid:dximagetransform.microsoft.gradient (startcolorstr= ' #063053 ', endcolorstr= ' #395873 ');/* IE8　　　　 + */-ms-filter: "Progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #063053 ', endcolorstr= ' #395873 ')"; /* Ie10 */background-image:-ms-linear-gradient (#063053, #395873, #5c7c99);/* Opera 11.1 */background-image:- O-linear-gradient (#063053, #395873, #5c7c99);/* standard notation */background-image:linear-gradient (#063053, #395873, #5c7c99);}

The CSS gradient (gradients) technique also supports gradients with an angle, such as a 45-degree angle gradient:

/* fallback */background-color: #063053;/* chrome, Safari 4+; Multiple color stops */background-image:-webkit-gradient (linear, left bottom, right top, color-stop (0.32, #063053), C Olor-s Top (0.66, #395873), Color-stop (0.83, #5c7c99));/* chrome + +, Safari 5.1+ */background-image:- Webkit-linear-gradient (45deg, #063053, #395873, #5c7c99);/* Firefox; Multiple color stops */background-image:-moz-linear-gradient (45deg, #063053, #395873, #5c7c99);/* IE10 */ Background-image:-ms-linear-gradient (45deg, #063053 0, #395873 100%);/* Opera 11.1 */background-image:- O-linear-gradient (45deg, #063053, #395873);/* the "standard" */background-image:linear-gradient (45deg, #063053, # 395873);}

CSS Color gradient (gradients) technology is valuable, but sometimes difficult to implement. Sometimes you have achieved the desired gradient, and browser support becomes a problem. Here are some suggestions for using CSS color gradients (gradients):

• Want to make your CSS color gradient (gradients) show some transparency? Use the RGBA color.

• Use the bottom of the background color to prevent the browser from not being aware of any color when it is not supported.

• Both Firefox and Google browsers support Repeating-linear-gradient and repeating-radial-gradient, and the usage is:

Background-image:-moz-repeating-linear-gradient (Top left-45deg, green, red 5px, White 5px, #ccc 10px); background-image :-webkit-repeating-linear-gradient ( -45deg, green, red 5px, White 5px, #ccc 10px);

Effect:

Basic color linear gradient, top-down

Basic color linear gradient, 45 degree angle (Chrome, Safari, Firefox, IE10, Opera)