In-depth explanation CSS3 linear gradient lineaer-gradient in oblique direction

First, the problem is not so easy to think

Ask, using the CSS3 gradient gradient, to implement a diagonal linear gradient (100px, 100px) to (200px, 200px) from red to yellow on a 400*300 p-layer, how do I do that?

ZXX: The discussion here CSS3 gradients are based on the new canonical notation and ignore the private prefixes

We may know the implementation of a horizontal gradient, similar to this:

{background-image:linear-gradient (left, red 100px, Yellow 200px);}

The effect may be similar to this:

Naturally, that from (100px, 100px) to (200px, 200px) should be from the upper left corner, should be like this:

{Background-image:linear-gradient (left top, red 100px, Yellow 200px);}

The effect may be similar to this:

Wow, handsome, well, it should be the effect we want! ——

This is obviously impossible, if it is so simple, I will not take it out to say ~

We open Photoshop and other drawing software, draw a gradient to meet the above requirements, to see the effect is:

In contrast to the above CSS implementations:

The red area is obviously a lot worse, what's going on?

I can only tell you that things are far less simple than you think!

Second, use lazy slow thinking, start from the beginning

We have problems, if the first response is to help others, get is the surface of the thing, if you dig deeper, get is often the real thing. The first kind of person seems to be eager to learn, is actually a lazy person, diligent use of easy, less energy-intensive quick thinking, this person is suitable for sales, PR, not suitable for technology, but does not mean that he earns less money.

Off-topic donuts. Take a deep breath, come, suck ..... OK, now we re-examine the standard notation for the linear gradient of the CSS3 gradient (because WebKit is not supported, this omits to):

Background-image:linear-gradient (  [<angle> | <side-or-corner>,]? <color-stop> [, < color-stop>]+);

The above CSS syntax we often see, may be someone can not understand the specific meaning, in fact, some of the above symbolic meaning and regular expressions have many similarities:

[] represents a character class in the regular, and here you can understand it as a small unit.

| Represents a candidate. That means "or", either in front or on the back.

? As a quantifier, 0 or 1, the implication is that you can not specify the direction, the direct gradient to go. For example:

Background:linear-gradient (red, yellow);

is the red and yellow stripe effect from the top down.

+ is also a quantifier, representing 1 or more. Therefore, terminating the color is indispensable. For example: Linear-gradient (red) is soy sauce life, whiteboard.

<> is a keyword that is primarily for developers to know what to put in place.

Linear gradient keyword
1. Angle
Angle represents the angle of the gradient, however, this angle change must not be taken for granted, for example:
If the angle is 45deg, or a red to yellow gradient, the following figure is the correct expression:

Is it a or B or C or d?

This is more than a girlfriend holding four pieces of clothes to let you say which is easy to look at.

5 Seconds Countdown, 5, 4, 3, 2, 1, ...

Well, the answer is: C

My dear friend, have you answered the right wood?

I guarantee that many people have answered the wrong question (including myself), why do they make mistakes? The reason is simple, "familiarity effect".

One reliable way to convince people of falsehood is to keep repeating it because it is difficult to distinguish between familiarity and truth. --Daniel Kahneman

We, for example, have touched the rotation in CSS3 transform very often, and the rotate (45deg) effect is that the element default state rotates 45° clockwise, so this familiarity makes us feel that the rotation of the gradient should be the same. The default gradient is from top to bottom, then the rotation 45° should be D AH (see next GIF), how can it be c?

Photoshop and CSS3 are getting closer and we can find answers from Photoshop.

As you can see from the ring in that circle, the angle of the gradient is not the same as the angle of rotation. This angle of the linear gradient is the divergence direction of the center point. The big picture is:

2. Side-or-corner
Side-or-corner Chinese means "Edge or corner", the optional values are:

[left | right] | | [Top | bottom]

Indicates that you can have the following wording or combination:
Left, right, top, bottom, left top, left bottom, right top, right bottom. Respectively, from left to right, from right to left, from top to bottom, down to top, from top left to bottom right, from ... (All understand, not all write)

The left top (from top to bottom) is just the first example we used, now look, think about it and know we're using it wrong!

Obviously, from (100,100) to (300,300) is a 45-degree multiplier angle, while the left top angle is straight to the lower right corner, and the container is 400*300, obviously, not a 45-degree multiplier angle. According to our understanding of the angle, the angle should be -45°,-45° for the center of the net to the right of the bottom of a line 45 degrees, just in line with the direction from (100,100) to (300,300)!

3. Color-stop

Gradient key Color node, syntax:

<color> [<percentage> | <length>]

The Chinese explanation is that the color value + space + percent or length value. For example Red 100px. Remember, the color value here can only be one, so red 100px 100px is completely wrong drop!

OK, now we define the re-carding again, now realize the beginning of the gradient should be OK, try Bai ~

The following CSS:

{background-image:linear-gradient ( -45deg, Red 100px, Yellow 200px);}

The following effects:

With the naked eye looking like that, let's compare the correct implementation in Photoshop:

The amount ~ seems or is not right ah, and the difference is farther, how to return a matter???

I can only tell you that things are far less simple than you think!

Third, in-depth understanding of linear gradient angle coordinates

The above code we slightly modified, plus-webkit prefix and-moz prefix look:

{background-image:-webkit-linear-gradient ( -45deg, Red 100px, Yellow 200px);}

The following effects (non-webkit cores):

Gee, it looks like the angle is right! What happened

This is a wonderful problem in Chrome, and recently Chrome has removed the private prefix for the CSS3 gradient, but the parsing also has a write change:

Background-image:-webkit-linear-gradient ( -45deg, red, yellow)

And

Background-image:linear-gradient ( -45deg, red, yellow)

The gradient direction under Chrome is actually the opposite! 45deg is normal.

The same is true under the Firefox browser, with a prefix and no prefix in the opposite direction! What happened

The reason is very simple, CSS3 is still a draft stage!

From the browser to remove the prefix before and after the changes can be inferred, before, the world's gradient coordinates are consistent with Photoshop, but later, for some reason, modified.

For what reason, according to my cursory search, may be associated with one of the following keywords: animation/transition animation, Write-mode writing direction, Flex box model, and radial-gradient gradient.

Using angles
For the purpose of this argument, ' 0deg ' points upward, and positive angles represent-clockwise rotation, so ' 90deg ' point Toward the right.

That is

Using angles
The parameter is interpreted as follows, ' 0deg ' points to the top, while the positive angle rotates clockwise, so ' 90deg ' points to the right.

Let's draw this:

It can be seen that there is a difference between the normalized gradient coordinate system and Photoshop.

At the same time, also warned us that the private prefix can not be used in chaos Oh!

Facing the future, obviously we have to follow the norm, so there is CSS:

{background-image:linear-gradient (135deg, Red 100px, Yellow 200px);}

The effect is:

Compare with PS graph:

I go ~ Why still the discrepancy? --the red area is obviously different in size!

I can only tell you that things are far less simple than you think!

Iv. in-depth understanding of angular coordinates and positional relationships

For a diagonal linear gradient, the point-to-point gradient is not directly placed on the horizontal axis. Because when the gradient is tilted, the coordinates of the starting and ending points of the gradient change. is a piece of official code that demonstrates the starting point and direction of the 45deg gradient.

Remembering a key point, the beginning and end of the gradient (the default) is on the vertical line of the gradient line over the center, so we can determine the position of the start and end point. With this understanding, we can draw out where the 135deg starting point on 400*300 p is, and then make sure (100,100) and (200,200) the position is much easier.

As follows:

The top of the picture preface, anyway above this picture I understand. So our coordinates start and end point value actually becomes, the length of the black bracket and the length value of the purple bracket is how many!

Although many people do not like math, but the geometry should be good, we come together to calculate ...

ZXX: Length calculation ...

The result is, the starting point:

MATH.SQRT (2) = 141.4213562373095;

The end point is:

* MATH.SQRT (2) = 282.842712474619;

CSS for use on:

{background-image:linear-gradient (135deg, Red 141.4213562373095px, Yellow 282.842712474619px);}

Effect:

Compared to the effect of PS:

"Recommended"

1. CSS3 Free Video Tutorial

2. A detailed explanation of linear-gradient parameters in CSS3

3. Syntax of CSS linear-gradient ()

4. Examples of linear-gradient in CSS3

5. How to use lineaer-gradient in CSS3