关于前端:CSS-阴影进阶实现更加的立体的阴影效果

CSS 暗影的存在，让物体看上去更加有型平面。

然而，在最简略的暗影应用之上，咱们能够实现更多有意思且更加平面的暗影成果。

本文将带大家看看如何应用 CSS 实现几类比一般暗影更加平面的暗影成果。

CSS 暗影根底

CSS 中，明面上能够实现暗影的有三个属性：

• box-shadow – 盒暗影
• text-shadow – 文字暗影
• filter: drop-shaodw() – 滤镜内的暗影

对于它们的根底语法和应用就不过多形容，这一部分大家能够先在 MDN 补齐，贴几张图疾速温习一下：

box-shadow – 盒暗影：

text-shadow – 文字暗影：

filter: drop-shaodw() – 滤镜内的暗影：

基本上 3 种暗影大同小异，须要留神的就是：

• box-shadow 还辨别内暗影，内暗影应用关键字 inset 进行形容；
• box-shadow 多一个暗影扩散半径参数。

长投影

下面提到了通过多层暗影叠加实现文字的平面暗影。使用在 div 这些容器上也是能够的。当然这里还有一种挺有意思的办法。假如咱们，有一个矩形元素，心愿给他增加一个长投影，像上面这样：

要生成这种长投影，刚刚说的叠加多层暗影能够，再就是借助元素的两个伪元素，其实下面的图是这样的：

关键点在于，咱们通过对两个伪元素的 transform: skew() 变换以及从实色到通明色的背景色变动，实现了长投影的成果：

CodePen Demo — 线性突变模仿长暗影

平面投影

好，咱们持续。下一个主题是 平面投影。

这个说法很奇怪，暗影的呈现，本就是为了让本来的元素看起来更加的平面，那这里所谓的平面投影，是个怎么平面法？

这里所谓的平面投影，并不一定是应用了 box-shadow、text-shadow 或者 drop-shadow，而是咱们应用其余元素或者属性模仿元素的暗影。而这样做的目标，是为了可能冲破 box-shadow 这类元素的一些定位局限。让暗影的地位、大小、含糊度能够更加的灵便。

OK，让咱们来看看，这样一个元素，咱们心愿通过自定义暗影的地位，让它更加平面：

上图 div 只是带了一个十分浅的 box-shadow，看上去和平面没什么关系，接下来，咱们通过 div 的伪元素，给它生成一个和原图边角形态相似的图形，再通过 transform 位移一下，可能是这样：

OK，最初对这个用伪元素生成的元素进行一些虚化成果（filter 或者 box-shadow 都能够），就能够实现一个边角看起来像被撕开的平面成果：

代码非常简单，伪 CSS 代码示意如下：

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

所以总结一下：

• 平面投影的关键点在于利于伪元素生成一个大小与父元素相近的元素，而后对其进行 rotate 以及定位到适合地位，再赋于暗影操作
• 色彩的使用也很重要，暗影的色彩通常比自身色彩要更深，这里应用 hsl 示意色彩更容易操作，l 管制色彩的明暗度

还有其余很多场景，都能够用相似的技巧实现：

具体残缺的代码，你能够戳这里：CodePen Demo — 平面投影

浮雕暗影

还有一类平面成果的暗影就是浮雕暗影，它的实质还是 box-shadow 和 text-shadow，只是须要管制好色彩的配合以及内外暗影的一起应用。外围就是 2 点：

1. 背景色与内容（文本或者盒子色彩）统一
2. 应用两个相同的方向，应用两组比照显著的色彩值，来实现凹凸成果。

首先，咱们来看一个文字版的浮雕成果。

先实现一个凸起的成果，咱们须要实现一个背景色和文字色一样的文字：

<div> 浮雕暗影 </div>

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

成果如下，因为背景色和文字色的色彩一样，所以咱们什么都看不到。

不过没事，咱们给文字增加一个 1px x、y 方向的彩色暗影：

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

成果如下：

有点感觉了，再反向，也就是 -1px x、y 方向增加一个彩色绝对，也就红色的暗影：

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

成果如下，这样咱们就失去了一个凸起质感的浮雕暗影：

如果咱们把色彩对调一下呢？

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

就能很轻松的失去凹下质感的浮雕暗影：

上述 DEMO 的残缺代码：CodePen Demo – Embossed Shadow

新拟态格调暗影

咱们将使用在文字上的技巧，扩大延长到容器上，就能失去最近比拟火的拟态格调暗影，其原理也是大同小异。

两个暗影，应用两个相同的方向，应用两组比照显著的色彩值，来实现凹凸成果。与文字不同的是，这里的凹成果，咱们须要应用盒子的内暗影实现。

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

这样，就能够失去拟态格调的按钮，如下图所示，左凸右凹：

再通过一个简略的过渡，就能够实现整个点击的交互：

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

看看成果：

文字平面投影 / 文字长暗影

下面的平面成果在文字上就齐全不实用了，所以看待文字的平面暗影成果，还须要另辟蹊径。

失常而言，咱们应用 text-shadow 来生成文字暗影，像这样：

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

嗯，挺好的，就是不够平面。那么要做到平面文字暗影，最常见的办法就是应用多层文字暗影叠加。

Tips：和 box-shadow 一样，text-shadow 是能够叠加多层的！然而对于单个元素而言，drop-shadow 的话就只能是一层。

好，下面的文字，咱们试着叠加个 50 层文字暗影试一下。额，50 层手写，其实很快的~

好吧，手写真的太慢了，还容易出错，所以这里咱们须要借助一下 SASS/LESS 帮忙，写一个生成 50 层暗影的 function 就好，咱们每向右和向下偏移 1px，生成一层 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 代码。通过编译后，就会生成如下 CSS：

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

看看成果：

额，很不错，很平面。然而，就是丑，而且说不上来的奇怪。

问题出在哪里呢，暗影其实是存在明暗度和透明度的变动的，所以，对于渐进的每一层文字暗影，明暗度和透明度应该都是一直变动的。这个需要，SASS 能够很好的实现，上面是两个 SASS 色彩函数：

• fade-out 扭转色彩的透明度，让色彩更加通明
• desaturate 扭转色彩的饱和度值，让色彩更少的饱和

对于 SASS 色彩函数，能够看看这里：Sass 根底—色彩函数

咱们应用下面两个 SASS 色彩函数批改一下咱们的 CSS 代码，次要是批改下面的 makeLongShadow 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;
}

好，看看最终成果：

嗯，功败垂成，这次悦目了很多~

具体残缺的代码，你能够戳这里：CodePen Demo — 平面文字暗影

当然，应用 CSS 生成平面文字暗影的办法还有很多，上面再贴出一例，应用了 通明色叠加底色的多重线性突变 实现的文字平面暗影，感兴趣的同学能够去看看具体实现：

具体残缺的代码，你能够戳这里：CodePen Demo — 线性突变配合暗影实现条纹平面暗影条纹字

最初

总结一下，本文介绍了利用 CSS 实现 5 种更加平面的暗影成果的形式，能够帮忙咱们对 CSS 暗影有更好的了解。

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。