投影效果

可以通过box-shadow生成投影，但是通常在设置了模糊半径后投影的最外圈会向四周扩散，如果通过设置一个大于模糊半径的偏移量，则会导致外露的阴影太过浓重，视觉效果不是很完美

1
2
3
div {
    box-shadow: 5px 5px 4px black;
}

那么如何在元素的一侧或者两侧生成美观的投影呢？

单侧及两侧投影

  • 单侧投影

    通过设置一个负的且与模糊半径相等的扩张半径来“抵消”侧面的模糊效果

    1
    2
    3
    div {
        box-shadow: 0 5px 4px -4px black;
    }

  • 邻边投影

    将扩张半径设置为模糊半径的一半，偏移量设置为大于或等于模糊半径的一半

    1
    2
    3
    div {
        box-shadow: 5px 5px 6px -3px black;
    }

  • 对边投影

    在对边使用两次单侧投影

    1
    2
    3
    4
    div {
        box-shadow:  5px 0px 5px -5px black,
                    -5px 0px 5px -5px black;
    }

不规则投影

使用box-shadow无法对伪元素或者元素中透明的部分做很好的调整

1
2
3
div {
    box-shadow: 4px 4px 1px black;
}

可以使用filter中的drop-shadow()效果

1
2
3
div {
    filter: drop-shadow(5px 5px 1px black);
}

染色效果

基于滤镜的方案

将多个滤镜组合可以实现染色效果

1
2
3
img {
    filter: sepia(1) saturate(4) hue-rotate(295deg);
}

基于混合模式的方案

luminosity混合模式会保留上层元素的HSL亮度信息，并从它的下层吸取色相饱和度

mix-blend-mode可以为整个元素设置混合模式，需要把图片包裹在一个容器中，并把容器的背景色设置为想要的主色调

1
2
3
<div id="color-mix-blend-mode">
  <img src="test.jpg">
</div>
1
2
3
4
5
6
#color-mix-blend-mode {
    background: hsl(335, 100%, 50%);
}
#color-mix-blend-mode img {
    mix-blend-mode: luminosity;
}

折角效果

45°折角

可以通过增加一层渐变来生成一个暗色的三角形，需要注意的是要使用勾股定理正确计算尺寸

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare

1
2
3
4
5
6
div {
    background: #58a;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0)
                    no-repeat 100% 0 / 2em 2em,
                linear-gradient(-135deg, transparent 1.5em, #58a 0);
}

其他角度及效果

通过对伪元素添加旋转、阴影等方法可以使效果更逼真

Some of us get dipped in flat, some in satin, some in gloss.... But every once in a while you find someone who's iridescent, and when you do, nothing will ever compare

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
div {
    position: relative;
    background: #58a;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    border-radius: 0.5em;
}
div::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, 0.4) 0)
                    100% 0 no-repeat;
    width: 1.73em;
    height: 3em;
    transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;
    box-shadow: -0.2em 0.2em 0.3em -0.1em rgba(0, 0, 0, 0.15);
}