[Go] draw shadows more gracefully

Box-shadow is a CSS3 property, but thanks to the browser support is good, and use it to create a sense of stereoscopic, layered feeling really convenient, which makes it a ubiquitous on the Internet CSS3 effects. But I feel it's not easy to write a good shadow. At least I often grope for a long while, write out of the shadow but always make people very uncomfortable. Last week, I saw a question and answer, very inspired: How to understand the Material design in the two layers of the shadow of the card, so deliberately went to see the designs of meterial designed guidelines (Chinese translation), I think some of the design ideas and details of the pursuit is worth our borrowing.

The title of this article is "more graceful to draw shadows", but in fact I do not understand what "elegance" is, just feel that others are doing better than mine, more elegant than mine. So let's see how others understand the shadows.

Meterial Design Abstracts The app's widgets, panels, modal frames, etc. into cards. For each of these, the z-axis is added, in addition to the definition of x/y axis coordinates. Cards at different levels, with relatively independent interaction logic. It can be said that cards and hierarchies are an interactive metaphor for an app page. and the visual definition of the hierarchy is done through the shadows. The following two pictures are transported:

The shadow definition above is an AI format, but it is easy to convert to the front-end language:

2. . z-index-1{
4. Box-shadow: 0 1px1.5px Rgba (00,0,0.12 0 1px 1px Rgba (0 ,0,0 0.24
6. }
8. . z-index-2{
9. Box-Shadow: 0 3px 3px 0 Rgba (0,0 0,0.16), 0 3px 3px 0 Rgba (0 ,0,0 0.23
11. }
13. . z-index-3{
15. Box-shadow: 0 10px10px Rgba (00,0,0.19 0 6px 3px Rgba (0 ,0,0 0.23
17. }
19. . z-index-4{
21. Box-shadow: 0 14px14px Rgba (00,0,0.25 0 10px 5px Rgba (0 ,0,0 0.22
23. }
25. . z-index-5{
27. Box-shadow: 0 19px19px Rgba (00,0,0.30 0 15px 6px Rgba (0 ,0,0 0.22
29. }

Look at the effect is really more elegant than my own realization of the feeling.

Insert a few words first, the Box-shadow property is interesting, it allows a number of heavy attribute values, the effect is superimposed on each other. Zhang Xin Xu has a blog to talk about this problem (portal), written very well, we can refer to.

This kind of shadow effect everyone feel, I think no matter how, better than I made up, blind tune out. But why use double shadows? The official explanation is to use two light sources to simulate the real scene, one is the key light, the other is the ambient light, so it produces two shadows. Another @jordanfc Shanfang's answer is great, but many are conclusive things, and we need a little more thinking.

Box-shadow: What does the reference light look like when you draw a shadow?

First of all: This paper focuses on the shadow concentration and blur parameters of the relationship between the light source distance object distance is far greater than the object size, ignoring the spread parameters. The first thing to consider in Box-shadow is that the shadow color allows for translucent colors, such as RGBA (0, 0, 0, 0.6), which in fact represents an evenly spaced ambient light with 40%, which we can not consider because it is equivalent to constant, has no effect on the entire shadow decay model, and, similarly, Shadow color also has no effect, can not be considered. For the shadow color above, we explored how the shadow concentration is from 0.6 (which only defines the starting point of decay) to 0.

In the Web page, after defining a shadow on an element, we find that the shadow is the same in all directions. What does that mean? If a person is standing in this shadow, we draw a box outside the element, and the distance between the frame and the boundary of the element is fixed, then this person in any place in this box, see the area of the light source is equal. So we can come to the conclusion that the light source should be a surface light, and the shape of the element is matched. Why is it a match, because in addition to the element is circular outside, other shapes, I also can't imagine what the light source should be. It is possible that for the vast majority of cases, a light source that can produce Box-shadow attribute effects does not exist in real life. (kidding me?)

Second thought: If such a light source exists, what is the more true shadow?

We look at the shadow of an object, only intuitively feel the shape of the shadow is reasonable, and does not reverse the light source is reasonable, because the reality of the lighting situation is too complex, there are too many uncertainties. So if the light source above exists, then what is the shadow like?

The concentration of the shadow and the area of light that can be seen in this position are counter-correlated, which should not be explained. The shape of the light source is not OK, we may as well reduce one dimension, consider the law in one-dimensional case:

Assuming that the shadow blur radius is Blur, the vertical projection boundary of the observation point is X (0<=x<=blur), the light source length is l and the length of the light source that can be taken to the observer point is L, then there are:

Extended to two-dimensional, assuming that the light source area is s, can be taken to the point of view of the light source area of S, then there is (indefinite integral, there is a certain element of memory)

A, B, C are constants, S is also constant, so simplify:

A, B is constant, a+b=1. When X=0, S=0, when the shadow is the strongest, 0pacity, when X=blur, S=s, then the shadow disappears. Then at any x, the shadow concentration o is:

From the above two, can be solved:

I wrote that I couldn't write it down, because the result I worked out with @jordanfc Shanfang's answer was the inverse of the image. Paste the picture of @jordanfc Shanfang:

He gave a concave function image, I solved a convex function, I have no research on the image, I was wrong? I don't know. But his interpretation of the shadow overlay should be wrong.

Thinking three: how multiple shadows overlap

First look at the understanding of @jordanfc Shanfang:

Seems to be able to justify it, but right?

Considering the superposition of the two shadows, we are mixing xx% black, so in this case, the RGB channel is not considered, only the alpha channel is considered. In the previous article, "Color overlay problem with alpha channel", we deduced the method of transparency blending in detail and now use it!

To add a y-axis offset to the shadow in meterial design, you might want to deal with cases where there is no y-axis offset. It is calculated using the simple z-depth-2 of data. First, the decay function of two shadows is written separately:

We can deduce from the following:

is a convex function, similar to the result I deduced. Now that you have the equation, you may want to draw the image to see:

The curvature of the shadow curve after mixing is very small, but it is quite different from what @jordanfc Shanfang describes. We can simply verify it. Since the curvature of the mixed curve is very small and can be ignored, we take this two-time curve as a straight line with the equation:

Translation into CSS is

1. Box-Shadow: 0 3px 3px 0 rgba(0,0, 0,0.3532);

Compared to look at the effect, can you see the difference?

What happens if you add the X, y offset effect? As a matter of fact, simply changing the O1 (x) and O2 (x) to piecewise functions will complicate the calculation of mixed shadows. Finally, take the z-depth=4 shadow image to the end of this article:

Blog Address: http://www.zhouhua.info/2015/03/24/shadow/

[Go] draw shadows more gracefully