Advanced CSS shadow to achieve a more three-dimensional shadow effect!

The existence of CSS shadows makes objects look more three-dimensional.

However, on top of the simplest use of shadows, we can achieve more interesting and more three-dimensional shadowing effects.

This article will show you how to use CSS to achieve several types of shadow effects that are more three-dimensional than ordinary shadows.

CSS Shadow Basics

In CSS, there are three properties that can implement shadows on bright surfaces:

• box-shadow - box shadow
• text-shadow - text shadow
• filter: drop-shadw() - drop shadow inside the filter

There is not much description about their basic grammar and usage. You can make up for this part in MDN first, and post a few pictures for a quick review:

box-shadow - box shadow:

text-shadow - text shadow:

filter: drop-shadw() - drop shadow inside the filter:

Basically, the 3 shades are almost the same, it is important to note that:

• box-shadow The inner shadow is also distinguished, and the inner shadow is described using the keyword inset ;
• box-shadow One more shadow diffusion radius parameter.

long projection

The three-dimensional shadow of the text is realized by the multi-layer shadow overlay mentioned above. It is also possible to apply it to containers such as div. Of course there is an interesting method here. Suppose we have a rectangular element and want to add a long projection to it, like this:

To generate this kind of long projection, the superimposed multi-layer shadows just mentioned can be used, and then the two pseudo elements of the element are used. In fact, the above picture is like this:

The key point is that we achieved the effect of long projection by transforming two pseudo-elements transform: skew() and changing the background color from solid color to transparent color:

CodePen Demo -- Linear Gradient Simulates Long Shadows

Stereographic projection

OK, let's move on. The next topic is stereo projection .

This statement is very strange. The appearance of shadows is to make the original elements look more three-dimensional. What is the so-called three-dimensional projection here?

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

OK, let's take a look at such an element, we want to make it more three-dimensional by customizing the position of the shadow:

The div in the picture above just has a very shallow box-shadow , which doesn't seem to have anything to do with the three-dimensional. Next, we use the pseudo-element of the div to generate a graph similar to the shape of the corners of the original image, and then Shift through the transform, maybe like this:

OK, and finally perform some blurring effects on the element generated by the pseudo element (filter or box-shadow can be used), you can achieve a three-dimensional effect where the corners look like they are torn:

The code is very simple, the pseudo CSS code is shown as follows:

 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: 0 0 20px 15px hsl(48, 100%, 20%);
}

So to summarize:

• The key point of stereo projection is to facilitate pseudo-elements to generate an element with a size similar to the parent element, then rotate and position it to an appropriate position, and then assign shadow operations to it
• The use of color is also very important. The color of the shadow is usually darker than the color itself. Here, hsl is used to indicate that the color is easier to operate, and l controls the brightness of the color.

There are many other scenarios that can be achieved with similar techniques:

For detailed and complete code, you can click here: CodePen Demo -- Stereo projection

Embossed Shadow

There is another type of three-dimensional effect shadow is the relief shadow, its essence is box-shadow and text-shadow , just need to control the color matching and use of inner and outer shadows. The core is 2 points:

1. The background color matches the content (text or box color)
2. Use two opposite directions, using two sets of contrasting color values, to achieve the bump effect .

First, let's look at the relief effect of a text version.

To achieve a raised effect first, we need to implement a text with the same background color as the text color:

 <div>浮雕阴影</div>

 body {
    background: #999;
}
p {
    color: #999;
}

The effect is as follows, since the background color is the same color as the text color, we can't see anything.

But it's okay, let's add a black shadow to the text 1px in the x and y directions:

 p {
    color: #999;
    text-shadow: 1px 1px 1px #000;
}

The effect is as follows:

I feel a little bit, and then reverse it, that is, -1px Add a black relative to the x and y directions, which is a white shadow:

 p {
    color: #999;
    text-shadow: 
        1px 1px 1px #000, 
        -1px -1px 1px #fff;
}

The effect is as follows, so that we get a raised textured relief shadow:

What if we reverse the colors?

 p {
    color: #999;
    text-shadow: 
        1px 1px 1px #fff, 
        -1px -1px 1px #000;
}

You can easily get a relief shadow with a concave texture:

The complete code of the above DEMO: CodePen Demo - Embossed Shadow

Neo-mimetic style shadows

We will extend the techniques used in text to containers, and we will be able to get the most popular mimetic style shadows. The principles are similar.

Two shadows, using two opposite directions, using two sets of contrasting color values, to achieve a bump effect. Unlike the text, the concave effect here, we need to use the inner shadow of the box to achieve .

 <div>浮雕阴影</div>
<div>浮雕阴影</div>

 div {
    width: 120px;
    height: 120px;
    background: #e9ecef;
    color: #333;
    box-shadow:
        7px 7px 12px rgba(0, 0, 0, .4),
        -7px -7px 12px rgba(255, 255, 255, .9);
}

div:nth-child(2) {
    box-shadow:
        inset -7px -7px 12px rgba(255, 255, 255, .9),
        inset 7px 7px 12px rgba(0, 0, 0, .4);
}

In this way, you can get a mimetic style button, as shown in the figure below, with left convex and right concave:

Then through a simple transition, the interaction of the entire click can be realized:

 div {
    transition: .2s all;
    box-shadow:
        7px 7px 12px rgba(0, 0, 0, .4),
        -7px -7px 12px rgba(255, 255, 255, .9),
        inset 0 0 0x rgba(255, 255, 255, .9),
        inset 0 0 0 rgba(0, 0, 0, .4);
    
    &:active {
        box-shadow:
            0 0 0 rgba(0, 0, 0, .4),
            0 0 0 rgba(255, 255, 255, .9),
            inset -7px -7px 12px rgba(255, 255, 255, .9),
            inset 7px 7px 12px rgba(0, 0, 0, .4);
    }
}

Take a look at the effect:

Text Stereoscopic Projection / Text Long Shadow

The above three-dimensional effect is completely inapplicable to text, so it is necessary to find another way to deal with the three-dimensional shadow effect of text.

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

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

Well, it's good, but it's not solid enough. So to achieve three-dimensional text shadow, the most common method is to use multi-layer text shadow overlay.

Tips: Same as --- box-shadow , text-shadow can be superimposed on multiple layers! But for a single element, drop-shadow can only be one layer.

Well, the above text, let's try to overlay a 50-layer text shadow. Well, 50 layers of handwriting, actually very fast~

Well, handwriting is really slow and error-prone, so here we need to use the help of SASS/LESS to write a shadow that generates 50 layers function just fine, we deviate right and down every time Move 1px 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%));
}

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;
}

Take a look at the effect:

Well, it's nice, it's solid. However, it is ugly, and it is unspeakably strange.

Where is the problem? Shadows actually have changes in lightness and transparency. Therefore, for each layer of text shadows that are progressive, the lightness and transparency should be constantly changing. This requirement, SASS can be well implemented, the following are two SASS color functions:

• fade-out Change the transparency of the color to make the color more transparent
• desaturate Change the saturation value of the color to make the color less saturated

For SASS color functions, you can look here: Sass Basics - Color Functions

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 #{$i}px #{$color};
    }

    @return $val;
}

OK, let's see the final result:

Well, you're done, this time it's a lot more pleasing to the eye~

For the detailed and complete code, you can click here: CodePen Demo -- Three-dimensional text shadow

Of course, there are many ways to use CSS to generate three-dimensional text shadows. Here is another example. The text three-dimensional shadow is realized by using multiple linear gradients with transparent colors and background colors . Interested students can go to see the specific implementation:

For the detailed and complete code, you can click here: CodePen Demo -- Linear gradient and shadow to achieve striped three-dimensional shadow striped characters

At last

To sum up, this article introduces 5 ways to use CSS to achieve more three-dimensional shadow effects, which can help us have a better understanding of CSS shadows.

Well, this is the end of this article, I hope it helps you :)

If you want to get the most interesting CSS information, don't miss my official account -- iCSS front-end anecdotes 😄

More wonderful CSS technical articles are summarized in my Github -- iCSS , which will be updated continuously. Welcome to click star to subscribe to the collection.

If you have any questions or suggestions, you can communicate more. Original articles are limited in writing and knowledge. If there are any inaccuracies in the article, please let me know.