In-depth understanding of CSS3 gradient oblique linear gradient--Zhang Xin Xu

by Zhangxinxu from http://www.zhangxinxu.com
This address: http://www.zhangxinxu.com/wordpress/?p=3639

First, the problem is not so easy to think

Ask, 400*300 div (100px, 100px) (200px, 200px) How do you implement a diagonal linear gradient from red to yellow, using CSS3 gradient gradients, on a layer?

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 should be from (100px, 100px) the (200px, 200px) top left corner, it 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 (this is omitted because WebKit is not supported 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, the expression of 0 one or 1 the other, the implication is that you can not specify the direction, directly fade away. For example:

  Background:linear-gradient (red, yellow);

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

• +is also a quantifier, indicating 1 one or more. Therefore, terminating the color is indispensable. For example: linear-gradient(red) soy sauce life, white board.
• <>The key is to let the developer know what should be put here.

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

Yes or no, or what A B C 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 the CSS3 many times, and the transform rotate(45deg) effect is that the element's default state rotates clockwise, 45° so this familiarity makes us feel that the rotation of the gradient should be the same. The default gradient is from top to bottom, so the rotation 45° should be D Yes (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-cornerChinese 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)

One of them left top (from top left to bottom right) is just the first example we used, now look, think about it, we know we used the wrong!

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

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 that the color value here can only be one, so red 100px 100px it is completely wrong to 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 to see:

{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! 45degis 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, there may be a link to one of the following keywords: animation/transition animation, write-mode writing direction, flex box model, and radial-gradient gradients.

This is what the current specification says:

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 shows the starting 45deg and ending points and the direction of the 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 where the 400*300 div 135deg starting point is, and then make sure that (100,100) (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:

Wow, that's the same! Claps!

V. Concluding remarks

Study hard and keep up!

This article is the original article, will update the knowledge point frequently and fix some errors, so reproduced please keep the original source, convenient traceability, avoid the misleading knowledge of old mistakes, and have a better reading experience.
This address: http://www.zhangxinxu.com/wordpress/?p=3639

(End of this article)

In-depth understanding of CSS3 gradient oblique linear gradient--Zhang Xin Xu