CSS gradient effect implementation method and effect demonstration

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.

Related Article
WordPress 3D rotating tag cloud

This 3D tag cloud is not the flash version of WP cumulus n years ago. This 3D rotating tag cloud Read more

Using wampserver tool to build local PHP + MySQL environment

No matter whether we use domestic space or foreign hosts, we prefer to go online after local debugging before setting Read more

How to install Linux system on Android phone

In our daily use of Android mobile phones, the installation of a complete Linux system will make mobile phones become Read more

How to backup your website data with Android phone

No matter what you do, backup is very necessary and important. Backup is just in case. Most of the time, Read more

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image