CSS3 Gradients

By , March 20th, 2015 , Tags: , 0 Comments

CSS3 released a long time, and now in some foreign pages can often see his shadow, it makes me envious long time, but unfortunately in the country in order to be compatible IE, let this one technique is greatly restricted, many Web front-end staff all stop looking. Even so but still have a lot of friends in the study CSS3 web applications in order not to be eliminated, and I began to CSS3 marching, fighting to keep up with cutting-edge technology. From now on, I will continue to release some CSS3 applications to share with everyone, today is our first look at: CSS3: Gradients─CSS3 gradients.

CSS3 Gradients into Linear-gradient (linear gradient) and radial-gradient (radial gradient). And we have today is for a linear gradient to analyze their specific usage. In order to better use CSS3 Gradients , we need to first look at the current core of several modern browsers, mainly mainstream content Mozilla (Gecko) (familiar have Firefox, Flock and other browsers), WebKit (the familiar have Safari, Chrome and other browsers), Opera (presto) (Opera browser), Trident (nasty IE browser). In this paper, as usual ignored IE Regardless, we mainly look at the application, of course, can also be achieved in IE Mozilla, Webkit, Opera under, he needs to be implemented IE-specific filters, the filter will be listed in the back of the use of grammar, but does not specifically describe how practical, interested can search for relevant technical documentation. We understand that these are now the subject of today it began.

CSS3 linear gradient
A linear gradient applied under the Mozilla




(Unless otherwise specified, we are all examples of application of the basic code behind this section of html and css)

Now we give this application a simple gradient div style:

Results are as follows:

Note: This is only a temporary effect in the Mozilla browser kernel in order to display properly.

Second, the linear gradient applied under Webkit’s

Let’s look at an old-fashioned wording examples:

The effect is as follows

Then we look at the wording in the new look:

This effect I will not stick out, everyone in the browser to see to understand, whether they consistent results.Careful comparison, in both Mozilla and Webkit are basically consistent with the study of law, but the difference between its prefix, of course, they can be unified into the same day, for us, of course, is better, then do not have to deal with the . Will greatly reduce our development time yo.

Third, the linear gradient applied at the Opera


Results shown in Figure

Fourth, the linear gradient used in Trident (IE) under

IE rely on filters to achieve gradient. startColorstr represents the starting point of color, endColorstr end color representation. GradientType said the gradient type, the default value of 0 indicates the vertical gradient, one representing the horizontal gradient.

Above we introduced the linear gradient method to achieve the above four core modules, and then we focused on a linear gradient to achieve a variety of different instances of a linear gradient under MOZ, Webkit, Opera three modules:

From the above syntax we can clearly know that to create a linear gradient, we need to create a starting point and a gradient direction (or angle), the definition of a starting color:

Specific applications are as follows:

Results are as follows:

Starting point (Starting Point) works like background position. You can set the horizontal and vertical positions as a percentage or in pixels, or in the horizontal direction can use left / center / right, can be used in the vertical direction top / center / bottom. Position starting at the top left corner. If you have a horizontal or vertical position is not specified, it defaults to center. It works mainly includes: Top → Bottom, Left → Right, bottom → top, right → etc. left, then we look at the realization of a major kind of effect:

1, starting at center (horizontally) and top (vertical direction) is the Top → Bottom:



2, started left (horizontal) and center (vertical direction) is on the Left → Right:

Results are as follows:

3, starting at left (horizontal) and top (vertical):

Results are as follows:

4, Linear Gradient (with Even Stops):

Results are as follows:


5, with Specified Arbitrary Stops:

Results are as follows:


6, the angle (Angle):
As seen in the above example, if you do not specify an angle, it will automatically defined according to the starting position. If you want more control over the direction of the gradient, you might as well try to set the angle. For example, the following two gradients have the same starting point left center, but with a 30-degree angle.

No angle of the sample code:

Plus 30 degree angle code:

When the specified angle, remember that it is generated by the perspective of a horizontal line with a gradient, counterclockwise. Therefore, the use of 0deg will produce a left to right lateral gradient, and 90 degrees from the bottom to the top to create a vertical gradient. I’ll see you to the core code:

Let’s look at the difference between the various angles

Results are as follows:

In addition to the starting position and angle, you should specify the starting and ending colors. Starting and ending color gradient along the line, it will at the specified location (as a percentage or length setting) containing the specified color points. Beginning and ending number of colors is infinite. If you use a percentage of the position and 0% represents the starting point and 100% is the end, but the value is outside the area can be used to achieve the desired results. It is also a key produced by CSS3 Gradients gradient lies directly affect your design effects, like the example we have here is not perfect effect, just to give you show a gradient effect, so we first use the bar . We then look at the example of a different color from the site:

If you do not specify a location, the color will be evenly distributed. As in the following example:

Results are as follows


7, the gradual application of transparent ─ transparency (Transparency):
Transparency also supports transparent gradient. This produced some special effect is quite useful, for example, when stacking a plurality of background. Here is a combination of two backgrounds: a picture, a white to transparent linear gradient. We look at an example of the official website of it:

Then take a look at the effect of it

Above we introduced the CSS3 linear gradients, the article said the outset CSS3 gradients contains two parts, one is what we call a linear gradient, and the second is that we are going to say a radial gradient.

CSS3 radial gradient of
CSS3 radial gradients and linear gradients are very similar. We first look at its syntax :

(Need of special note is that the radial gradient to the current kernel does not support Opera browser, so we are in a radial gradient firefox, safari, chrome under test done.)

There are things about CSS3 gradients on the end, everyone will want to read the affirmation, he mainly used in what areas? This said, the more, the easiest is to make the background, we can also use it to make some nice button, you can also use it to make patterns, I have listed here some sample code patterns make it:

HTML code:

CSS code:


I founded CSS Matter in 2013 with the sole ambition of design, development, creativity and innovation on the Internet, which recognize and promote the best web designers, developers and web users in the world. I'm skilled, talented, creative and very passionate about my work. I like to work closely with people to ensure that each stage of a project goes great every step of the way. I like to ensure that all of my finished projects/work reflect how highly I would like to be perceived. I'm confident that with your ideas and my expertise we can create something that makes us both smile. If you like what I do, and think we could work together then don't hesitate to get in touch with me. Skype IM : cssmatter And Email

Want to write for CSS Matter?

If you're interested in becoming part of the CSS Matter team of authors, please send an email to Manish Salunke. It's best if you already have article ideas in mind – but if you don't, he'll help you find a good topic to cover.

Get Updates On Twitter

Do you want to get real-time updates, interesting web links, site news and announcements via Twitter? Follow CSS Matter on Twitter.

Subscribe to the RSS feed Today

The best way to keep up with CSS Matter articles regularly is by putting the CSS Matter RSS feed into your feed reader.