Shulou(Shulou.com)06/03 Report--

This article mainly introduces CSS shadow skills and attention details, the article is very detailed, has a certain reference value, interested friends must read it!

Unilateral projection

Let's start with unilateral projection, about box-shadow, most of the time, we use it to generate a bilateral projection, or a four-sided projection. As follows:

OK, what if you want to generate a unilateral projection?

Let's take a look at the definition of box-shadow usage:

{box-shadow: none | [inset? & & [?]] #} web front-end development learning Q-q-u-n: 767273102, sharing development tools, zero basics, advanced video tutorials, hope beginners take fewer turns

Taking box-shadow: 1px 2px 3px 4px # 333 as an example, the four values mean x-direction offset value, y-direction offset value, blur radius and expansion radius.

Here's a little trick. The radius of expansion can be negative.

Continue, if the blur radius of the shadow is the same as the negative expansion radius, then we will not see any shadows because the resulting shadow will be contained under the original element unless it is given an offset in a direction. So at this time, given the offset value of a direction, we can achieve unilateral projection:

Projection background / background animation

And then it says.

Obviously, 0 =-0, so when the blur radius and expansion radius of box-shadow are both zero, we can also get a shadow of the same size as the element, but obscured by the element itself, we try to offset it.

The CSS code is as follows:

Div {width: 80px; height: 80px; border: 1px solid # 333; box-sizing: border-box; box-shadow: 80px 80px 00 # 000;}

The results are as follows:

What's the use? It doesn't seem to make any sense.

Well, it really doesn't seem to work. However, we note that box-shadow can set up multi-layers, that is, multi-layer shadows, and can do transition animation (motion tweens). But background-image: linear-gradient (), that is, the gradient background, cannot be tweened.

Where does this go? OK, let's come back and take advantage of the above features, we can use box-shadow to implement a background map that could only be implemented using gradients:

With box-shadow, the CSS code to implement it is as follows (which can be simplified):

Shadow {position: relative; width: 250px; height: 250px;} .shadow::before {content: ""; position: absolute; width: 50px; height: 50px; top:-50px; left:-50px Box-shadow: 50px 50px # 000, 150px 50px # 000, 250px 50px # 000, 50px 100px # 000, 150px 100px # 000, 250px 100px # 000, 50px 150px # 000, 150px 150px # 000, 250px 150px # 000, 50px 200px # 000, 150px 200px # 000, 250px 200px # 000, 50px 250px # 000, 150px 250px # 000, 250px 250px # 000;}

If you do it with a gradient, it's just like this:

Width: 250px; height: 250px; background-image: linear-gradient (90deg, # 000 0%, # 000 50%, # fff 50%, # fff 100%); background-size: 100px 100px;}

Why choose the more complex box-shadow? Because it can be used for motion tweens, like this, this cannot be done with gradients:

Of course, this is just an example of Demo, and there are a lot of interesting effects with a little imagination. Post another:

Well, it's interesting, but it may not be of much practical use.

Stereoscopic projection

All right, let's move on. The next topic is stereoscopic projection.

This statement is very strange, the emergence of shadows is to make the original elements look more three-dimensional, then the so-called three-dimensional projection here, how is the three-dimensional method?

The so-called stereoscopic projection here does not necessarily use box-shadow, text-shadow or drop-shadow, but we use other elements or attributes to simulate the shadows of elements. The purpose of this is to break through some positioning limitations of elements such as box-shadow. Make the position, size and blur of shadows more flexible.

OK, let's take a look at such an element that we want to make it more stereoscopic by customizing the location of the shadow:

In the image above, div only has a very shallow box-shadow, which seems to have nothing to do with the solid. Next, we use the pseudo elements of div to generate a shape similar to the edges and corners of the original image, and then shift it through transform. It may be like this:

OK, finally, do some virtual effects on the element generated by the pseudo element (either filter or box-shadow) to achieve a three-dimensional effect in which the edges look torn apart:

The code is very simple, and the pseudo-CSS code is shown below:

Div {position: relative; width: 600px; height: 100px; background: hsl (48,100%, 50%); border-radius: 20px;} div::before {content: "; position: absolute; top: 50%; left: 5%; right: 5%; bottom: 0; border-radius: 10px; background: hsl (48,100%, 20%); transform: translate (0,15%) rotate (- 4deg) Transform-origin: center center; box-shadow: 00 20px 15px hsl (48,100%, 20%);} web front-end development learning Q-q-u-n: 767273102, sharing development tools, zero basics, advanced video tutorials, hope beginners take fewer turns

So to sum up:

The key point of stereo projection is to facilitate the pseudo element to generate an element whose size is similar to that of the parent element, then rotate it and position it to the appropriate position, and then assign it to the shadow operation.

The use of color is also very important. The color of shadow is usually darker than its own color. Hsl is used here to indicate that the color is easier to operate, and l controls the shade of the color.

There are many other scenarios:

Text stereo projection / text long shadow

The above three-dimensional effect is not applicable to the text at all, so we need to find another way to deal with the three-dimensional shadow effect of the text.

Normally, we use text-shadow to generate text shadows, like this:

Txt Shadow-div {text-shadow: 6px 6px 3px hsla (14,100%, 30%, 1);}

Well, it's fine, but it's not three-dimensional enough. Then the most common way to achieve three-dimensional text shadow is to use multi-layer text shadow overlay.

Tips: like box-shadow, text-shadow can be stacked with multiple layers! But for a single element, drop-shadow can only be one layer.

OK, for the text above, let's try to overlay 50 layers of text shadow. Well, 50 layers of handwriting, actually very fast.

Well, handwriting is really too slow and easy to make mistakes, so here we need the help of SASS/LESS to write a function that generates 50 layers of shadows. We offset 1px to the right and down to generate a layer of text-shadow:

@ function makeLongShadow ($color) {$val: 0px 0px $color; @ for $I from 1 through 50 {$val: # {$val}, # {$I} px # {$I} px # {$color}; @ return $val;} div {text-shadow: makeLongShadow (hsl (14,100%, 30%);}

The SCSS code above. After compilation, the following CSS is generated:

Div {text-shadow: 0px 0px # 992400, 1px 1px # 992400, 2px 2px # 992400, 3px 3px # 992400, 4px 4px # 992400, 5px 5px # 992400, 6px 6px # 992400, 7px 7px # 992400, 8px 8px # 992400, 9px 9px # 992400, 10px 10px # 992400, 11px 11px # 992400, 12px 12px # 992400, 13px 13px # 992400, 14px 14px # 992400, 15px 15px # 992400, 16px 16px # 992400, 17px 17px # 992400, 18px 18px # 992400, 19px 19px # 992400, 20px 20px # 992400, 21px 21px # 992400, 22px 22px # 992400, 23px 23px # 992400 24px 24px # 992400, 25px 25px # 992400, 26px 26px # 992400, 27px 27px # 992400, 28px 28px # 992400, 29px 29px # 992400, 30px 30px # 992400, 31px 31px # 992400, 32px 32px # 992400, 33px 33px # 992400, 34px 34px # 992400, 35px 35px # 992400, 36px 36px # 992400, 37px 37px # 992400, 38px 38px # 992400, 39px 39px # 992400, 40px 40px # 992400, 41px 41px # 992400, 42px 42px # 992400, 43px 43px # 992400, 44px 44px # 992400, 45px 45px # 992400, 46px 46px # 992400, 47px 47px # 992400, 48px 48px # 992400, 49px 49px # 992400 50px 50px # 992400 }

Look at the effect:

Well, it's good, it's three-dimensional. However, it is ugly, and it is inexplicably strange.

What is the problem? shadows actually have changes in shade and transparency, so for each layer of text shadow gradually, the shade and transparency should be constantly changing. This requirement can be well implemented by SASS. Here are two SASS color functions:

Fade-out changes the transparency of the color to make the color more transparent

Desaturate changes the color saturation value to make the color less saturated.

Let's use the above two SASS color functions to modify our CSS code, mainly to modify the above makeLongShadow function function:

Function makelongrightshadow ($color) {$val: 0px 0px $color; @ for $I from 1 through 50 {$color: fade-out (desaturate ($color, 1%), .02); $val: # {$val}, # {$I} px # {$color};} @ return $val;}

Okay, let's see the end result:

Well, it's done. It's a lot pleasing to the eye this time.

Of course, there are many other ways to generate stereoscopic text shadows using CSS. Here is another example of text stereoscopic shadows realized by multiple linear gradients of transparent colors and background colors. Students who are interested can take a look at the specific implementation:

Long projection

It is mentioned above that the three-dimensional shadow of the text is realized through the superposition of multi-layer shadows. It is also possible to apply it to containers such as div. Of course, there is an interesting way to do this. Suppose we have a rectangular element that we want to add a long projection to, like this:

To generate this long projection, the superimposed multi-layer shadow we just mentioned can, and then with the help of the two pseudo elements of the element, in fact, the figure above looks like this:

The key point is that we achieve the effect of long projection through the transform: skew () transformation of two pseudo elements and the background color change from solid color to transparent color:

Color projection

Generally speaking, most of the ways we generate shadows are box-shadow, filter: drop-shadow (), text-shadow. However, the shadows generated by using them can only be monochromatic or homochromatic.

If you say so, can you still generate the shadow of a gradient?

Well, of course not.

This really doesn't work, but by using the filter: blur blur filter cleverly, we can pretend to generate gradient or colorful shadow effects.

Suppose we have an avatar like this:

Let's use the filter to add a shadow effect similar to the color of the original image. The core CSS code is as follows:

.avator {position: relative; background: url ($img) no-repeat center center; background-size: 100%; &: after {content: "; position: absolute; top: 10%; width: 100%; height: 100%; background: inherit; background-size: 100%; filter: blur (10px) brightness (80%) opacity (.8) Z-index:-1;}} web front-end development learning Q-q-u-n: 767273102, sharing development tools, zero basics, advanced video tutorials, hope beginners take fewer turns

Look at the effect:

Its simple principle is to use pseudo elements to generate a new image of the same size as the original image superimposed under the original image, and then use filter blur filter: blur () with other brightness / contrast, transparency and other filters to create an illusory shadow, disguised as the shadow effect of the original image.

Lighting effects achieved by using box-shadow

OK, the above is mainly some ways to achieve all kinds of shadows, and then there are the effects. Let's first take a look at some of the lighting effects achieved with box-shadow.

Using box-shadow to realize neon lamp text effect

This effect, also known as Neon,Codepen, has many similar effects, which are essentially the superposition of a wide range of box-shadow transition effects and white text:

Using box-shadow to realize Shadow Light show

Similar to the effect above, it is essentially a transition effect of multiple shadows, maybe a little more 3D effect?

With reasonable collocation, the effect is better:

Using drop-shadow | box-shadow to implement single tag Douyin LOGO

Mm-hmm, since the title is called CSS shadow skills and details that you don't know, then this article should also be a bit of a trick.

Let's take a look at this first. A single tag imitates Douyin LOGO. Of course, because it is limited to one element, there are still a lot of flaws in the details.

The reason for thinking about imitation is that one day when I was browsing Douyin, I saw this LOGO on a whim, CSS wrote too much, and I wonder if this can be realized with CSS when I see anything.

Let's first take a look at Douyin's LOGO:

In fact, it is very simple, the main body is actually made up of three shapes similar to J in different colors. On the other hand, if you pick out one alone, you can divide it into 3/4 circles, | and blocks.

As it happens, an element plus its two pseudo elements can make up these three shapes. Let's try to achieve the following, and the simple CSS code is as follows:

-div {position: relative; width: 37px; height: 218px; background: # fff; &:: before {content: "; position: absolute; width: 100px; height: 100px; border: 37px solid # fff; border-top: 37px solid transparent; border-radius: 50%; top: 123px; left:-137px Transform: rotate (45deg);} &:: after {content: "; position: absolute; width: 140px; height: 140px; border: 30px solid # fff; border-right: 30px solid transparent; border-top: 30px solid transparent; border-left: 30px solid transparent; top:-100px; right:-172px Border-radius: 100%; transform: rotate (45deg);}}

The above code can generate the body of the entire shape:

Next comes filter: drop-shadow (), which provides some effects for the rendering of elements before they are rendered, and most often uses it to render overall shadows. We usually use it to achieve the small triangle of the dialog box and the shadow effect of the whole dialog box, like below, the left side is the effect of using drop-shadow, and the right side is the effect of using normal box-shadow.

OK, back to our body, let's use filter: drop-shadow () to generate the blue shadow to the left of its first layer, adding it to the body div:

Div {position: relative; width: 37px; height: 218px; background: # fff; filter:drop-shadow (- 10px-10px 0 # 24f6f0); &: before, &: after {...}}

The results are as follows:

OK, next we just need to add another layer of red filter: drop-shadow () on the right and we're done!

Wait! What's wrong? as I mentioned above, like box-shadow, text-shadow can be stacked with multiple layers! But for a single element, drop-shadow can only be one layer.

In other words, you can no longer use filter: drop-shadow () on div to generate a red projection on the other side, but fortunately, we still have two pseudo-elements of filter: drop-shadow () and box-shadow that have not yet been used, after a try:

Div {position: relative; width: 37px; height: 218px; background: # fff; filter:drop-shadow (- 10px-10px 0 # 24f6f0) contrast (150%) brightness (110%); box-shadow: 11.6px 10px 0 0 # fe2d52; &:: before {.... Filter: drop-shadow (16px 0px 0 # fe2d52);} &:: after {.... Filter:drop-shadow (14px 00 # fe2d52);}} web front-end development learning Q-q-u-n: 767273102, sharing development tools, zero basics, advanced video tutorials, hope beginners take fewer turns

We re-use the box-shadow of div and the filter: drop-shadow () of two pseudo elements respectively. Under the restriction of a single tag, the final result is as follows:

The above is all the content of the article "what are the shadow skills and details of CSS?" Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.