Through CSS border radius, I show you how to realize the rounded corner effect of square elements, which solves the problem that the developers can’t realize this effect when the artists draw it before. CSS gradients is a similar technique. Now, this technology is supported by Firefox, Google browser, Safari and IE8 +. We can use it safely on the website. Now let’s take a look at the basic syntax, browser support and defects of CSS gradients technology.
Watch the demoTerm and explanation of CSS gradients
CSS gradients allows us to decorate a space with the effect of a color gradient – from one color to another – to fill the space. Gradients come in two forms: linear and radial. It is obvious that CSS gradients technology is to produce a visual pattern effect, and the realization of this visual effect is very simple, can be realized through simple programming. CSS gradients has been introduced into CSS3 for a long time, but the promotion of this technology has experienced a long time.
Syntax of CSS color linear gradient
The syntax of CSS color linear gradient is slightly different in various browsers, but it is unified in the end
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. You need at least two colors (start and end). You can add any color to increase the richness of the color gradient. The definition of color stop point can be a color or a color plus a percentage
/* color-stop(percentage/amount, color) */ color-stop(0.20, red)
Because CSS gradients technology is a relatively new technology in CSS3 and belongs to advanced CSS function, each browser adds its own features to the implementation of this technology. For example, Google browser, which uses WebKit as the rendering engine, implements a variety of syntax for it. The following code basically covers all cases of top-down color gradient:
#example1 {
/* 底色 */
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);
/* 标准写法 */
background-image: linear-gradient(#063053, #395873, #5c7c99);
}
Notice that we first set a background color. This color is used in case the browser you are using does not support CSS gradients technology. CSS gradients technology also supports gradient direction with angle, not just up and down or left and right. We can implement it with the following syntax:
#example2 {
/* 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-stop(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);
}
What we can do is more complicated. A colorful CSS color gradient? Now let’s make a rainbow
/* example 3 - linear rainbow */
#example3 {
/* fallback */
background-color:#063053;
/* chrome 2+, safari 4+; multiple color stops */
background-image:-webkit-gradient(linear, left bottom, left top, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
/* chrome 10+, safari 5.1+ */
background-image:-webkit-linear-gradient(red, green, blue, purple, orange);
/* firefox; multiple color stops */
background-image:-moz-linear-gradient(top, red, green, blue, purple, orange);
/* ie10 */
background-image: -ms-linear-gradient(red, green, blue, purple, orange);
/* opera 11.1 */
background-image: -o-linear-gradient(red, green, blue, purple, orange);
/* The "standard" */
background-image: linear-gradient(red, green, blue, purple, orange);
}
In the early stage, ie used filter and – MS filter syntax to achieve gradient, but in the latest version, ie changed to – MS linear gradient syntax. We can solve this problem by using the conditional statement in CSS
<!--[if lt IE 10]>
<style>
.gradientElement {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#063053', endColorstr='#395873')";
}
</style>
<![endif]-->
Not ideal, but it’s important to design a website.
CSS circular gradients
CSS circular gradients is different from linear gradients. Instead of gradients along one direction, it radiates around a point and gradients 360 degrees. At present, all browsers except ie support CSS radial gradients, but they also have different syntax. I mean you, the browser of WebKit engine. WebKit has completely modified its CSS radial gradients syntax. Now let’s take a look at the old-fashioned way of writing:
/* basic */ background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* color stops */ background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6, blue), color-stop(0.8, purple), color-stop(1, orange));
Now the new syntax in WebKit (mainly represented by Google browser) is exactly the same as that in Firefox
radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)
This ring color gradient syntax is the latest syntax used by Firefox and Google browser. There are also some constants that can be used in this gradient technique to set the size of the gradient ring:
Closest side: for prototypes, it refers to the nearest edge to be reached when the gradient shape diffuses. For ellipse, it refers to the edge to reach the nearest edge in the horizontal or vertical direction.Closest corner: it refers to the nearest corner to be reached when the gradient figure diffusesFast side: similar to the closest side, but reaching the farthest side.The farthest corner: the farthest corner the gradient shape needs to reach when it diffusesContain: synonymous with closest sideCover: a synonym for fast corner
A basic usage of circular gradients is as follows:
#example4 {
background-image: -moz-radial-gradient(orange, red);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, from(orange), to(red)); /* old */
background-image: -webkit-radial-gradient(orange, red); /* new syntax */
background-image: radial-gradient(orange, red);
}
The above example doesn’t set position or size – just two color stops. In fact, you can use countless colors, like the rainbow we made below:
#example5 {
background-image: -moz-radial-gradient(red,green,blue,purple,orange);
background-image: -webkit-gradient(radial, center center, 0, center center, 220, color-stop(0.20, red), color-stop(0.40, green), color-stop(0.6,blue), color-stop(0.8,purple), color-stop(1,orange)); /* old */
background-image: -webkit-radial-gradient(red, green, blue, purple, orange); /* new syntax */
background-image: radial-gradient(red, green, blue, purple, orange);
}
We implement a more complex, plus location information and more color stop points:
#example6 {
background-image: -moz-radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
background-image: -webkit-radial-gradient(45px 45px, circle cover, yellow, orange);
background-image: radial-gradient(45px 45px 45deg, circle cover, yellow 0%, orange 100%, red 95%);
}
Note the color notation and length units used above. Yes, you can actually use any color or length unit.
Tips and tips for CSS gradients
CSS gradients technology is very valuable, but sometimes it is difficult to implement. Sometimes you’ve achieved the gradient you want, and browser support becomes a problem. Here are some suggestions for using CSS gradients:
Want your CSS gradients to show some transparency? Use RGBA color.Use the background color for backing, so as to prevent the browser from not paying attention to the absence of any color when it does not support it.Both Firefox and Google browser support repeating linear gradient and repeating radial gradient
#example7 {
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);
}
If you are strict with gradient effects, such as charts and animations, I recommend you use Dojo’s gfx package, which is a powerful tool for creating vector graphs. And the support for IE is also very good!CSS color gradient background
Old style browsers, such as IE6, IE8 or early Firefox, don’t support gradient technology, so you’d better set a default background color. When you encounter an unsupported browser, the background color will play a role
/* example 1 - basic */
#example1 {
/* fallback */
background-color:#063053;
/* gradients below */
}
Another way for unsupported browsers is to use a new browser to achieve this effect, then take a screenshot, and then use CSS condition judgment to adjust the output mode.
Watch the demo
CSS color gradient technology is a result of the evolution of CSS. With the development of modern browser technology, we can use this technology more confidently.