CSS3 implements background color gradient and css3 background color gradient

CSS3 implements background color gradient and css3 background color gradient

CSS gradient concept:

CSS Gradients allows us to modify a space with a gradient effect-transition from one color to another-fill the space. The gradient has two forms:linear(Linear gradient) andradial(Ring gradient ). Obviously, the Gradients technology produces a visual effect, which can be achieved through simple programming. CSS gradient (Gradients) has been introduced in CSS3 for a long time, but the promotion of this technology has gone through a long time.

 

Basic Syntax of CSS Gradients:

Unified code format

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

The first parameter is the gradient start point or angle. The second parameter is a color stops ). At least two colors are required (start and end). You can add any color to increase the richness of the color gradient. The definition of a color stop point can be a color or a color plus a percentage:

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

The following code basically includesTop-downColor gradient:

{/* Background */background-color: #063053;/* chrome 2 +, safari 4 +; multiple color stops */background-image:-webkit-gradient (linear, left bottom, left top, color-stop (0.32, #063053 ),
Color-stop (0.66, #395873), color-stop (0.83, #5c7c99);/* chrome 10 +, safari 5.1 + */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 format */background-image: linear-gradient (#063053, #395873, #5c7c99 );}

CSS Gradients technology also supports gradient directions with angle, such as 45 degrees angle gradient:

/* fallback */background-color:#063053;/* chrome 2+, safari 4+; multiple color stops */background-image:-webkit-gradient(linear, left bottom, right top, color-stop(0.32, #063053), 
　　　　　color-s top(0.66, #395873), color-stop(0.83, #5c7c99));/* chrome 10+, 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);}

The Gradients technology is very valuable, but sometimes it is difficult to implement. Sometimes you have implemented the desired gradient, and browser support will become a problem. The following are some suggestions for using Gradients:

• Do you want to make Gradients transparent? UsergbaColor.
• Use the background color to prevent any color when the browser does not support it.
• Firefox and Googlerepeating-linear-gradientAndrepeating-radial-gradientThe 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 degrees angle (Chrome, Safari, Firefox, IE10, Opera)