Study of CSS3 linear-gradient


I think CSS3 is very good, oneself also slightly seen, and tried some attributes. For my own part, I have no courage to say I learned CSS3, I think any seemingly small things, just stand on our own point of view to judge. Even if is "simple" HTML in my opinion is also very worthy of study, only keep a humble attitude, can see farther, go more stable.

Here to thank the website:

w3cplus, W3School , W3C and so on some online tutorials ah blog (and a lot of what is not the one one listed), I am from these places began to contact the legend of CSS3 and HTML5, and their learning notes will naturally learn from.

Suggestion: attribute most of CSS3 is still in draft, private prefix used when the best with their browser

eg:

{
 
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    border-radius:10px;
}

Today is the introduction of CSS3 gradient : linear-gradient

The gradient in the webpage should be a very common. But before CSS3, the gradient effect must use pictures to do. This can be a problem, as said before fillet and shadow, because of the use of images, to a certain extent, affect the performance of the webpage is in the affirmative, and web site maintenance and modification of the problem. CSS3 gradient was born for a long time, so far, as long as it is to support the property browser, in addition to their private prefix, other writing is the same.

In the beginning, the use of WebKit is:

-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*) //The old grammar rules
 
And up to now, the use of WebKit is: 
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//The latest writing grammar 
 
Now, the new grammar and other browsers, including Firefox, grammar writing unified Opera (now opera has used the WebKit kernel), 
 
In fact, gradient, is divided into two types of a linear gradient (linear-gradient), another is a radial gradient (radial-gradient). We can combine linear-gradient and radial-gradient added to any attribute, can receive pictures such as: backgorund-images, list-style-image and so on. Today I want to introduce is the title of linear-gradient. 
  1. A linear gradient

In my opinion, be the most changeful gradient parameters, a bit complicated, so the first from the simple to start

Linear-gradient's simple syntax:

Linear-gradient (start, end the starting color, color);

The starting point that gradual start position, color is from beginning to end color color gradient.

There are many kinds of writing gradually starting point:

1,The use of top, right, bottom, one to specify the gradient of the starting point in left

.test{
    background:-webkit-linear-gradient(top,#fff,#000);
    background:-moz-linear-gradient(top,#fff,#000);
    background:-o-linear-gradient(top,#fff,#000);
    background:linear-gradient(top,#fff,#000);
}

image

 

2,A slightly more complex, you can use the top and left or right combination, can also be used with left or bottom

Right combined to change the gradient threshold. But remember: top cannot be combined with bottom, left and right cannot be combined

.test{
    background:-webkit-linear-gradient(top right,#fff,#000);
    background:-moz-linear-gradient(top right,#fff,#000);
    background:-o-linear-gradient(top right,#fff,#000);
    background:linear-gradient(top right,#fff,#000);
}

image

.test{
    background:-webkit-linear-gradient(bottom left,#fff,#000);
    background:-moz-linear-gradient(bottom left,#fff,#000);
    background:-o-linear-gradient(bottom left,#fff,#000);
    background:linear-gradient(bottom left,#fff,#000);
}

image

3,The above two kinds of writing can only draw some gradual change limited. The starting point we can use to set the gradient angle.

In the following code as a template, the "0DEG" to modify as you want to view

.deg0{
    background:-webkit-linear-gradient(0deg,#fff,#000);
    background:-moz-linear-gradient(0deg,#fff,#000);
    background:-o-linear-gradient(0deg,#fff,#000);
    background:linear-gradient(0deg,#fff,#000);
}

I added 12 div, with 30DEG as the difference.

image

According to the results, I drew this picture

image

As can be seen, when using the angle set gradient starting point corresponding to botton, 0DEG, 90DEG corresponding to left, 180DEG corresponding to top, 360DEG corresponding to right. The whole process is to start with bottom counter clockwise rotation.

On the starting point of the I just learned so much, if after the draft was revised, I know will be updated immediately after.

Gradient color settings can be varied:

Color of the gradient can be more than two, between the starting point and end point color color can add more color.

.test{
    background:-webkit-linear-gradient(top,#fff,red,#000,red);
    background:-moz-linear-gradient(top,#fff,red,#000,red);
    background:-o-linear-gradient(top,#fff,red,#000,red);
    background:linear-gradient(top,#fff,red,#000,red);
}

image

Or:

.test{
    background:-webkit-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:-moz-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:-o-linear-gradient(top,red,yellow,blue,green,purple,orange);
    background:linear-gradient(top,red,yellow,blue,green,purple,orange);
}

image

In the example above, the color of the gradient is uniform, we can also give each color marker position of the gradient, so that the variation gradient is not simple, this is also very simple, just behind you want to modify the color and gradient of the civilian can. In order to simple, I only use three colors.

Uniform change
.test{
    background:-webkit-linear-gradient(red ,green,blue);
    background:-moz-linear-gradient(red ,green,blue);
    background:-o-linear-gradient(red ,green,blue);
    background:linear-gradient(red ,green,blue);
}

image

Add the location
.test{
    background:-webkit-linear-gradient(red 50% ,green,blue);
    background:-moz-linear-gradient(red 50% ,green,blue);
    background:-o-linear-gradient(red 50% ,green,blue);
    background:linear-gradient(red 50% ,green,blue);
}

image


Of course, if the color format using CSS3 in RGBA format, so the gradient will be transparent.


A linear gradient (linear-gradient) is introduced so far, there is error in the welcome message.


I studied the radial gradient (radial-gradient) I'm not a radial gradient notes

Posted by Sam at November 18, 2013 - 5:32 PM