css揭秘实战技巧 - 视觉效果[三]

全目录

本系列文章，主要是围绕css3属性，实现我们常见的各种效果，这些效果都是我们实战开发中经常可以用到的效果：

1. css揭秘实战技巧- 背景与边框 [一]
2. css揭秘实战技巧- 形状 [二]
3. css揭秘实战技巧 - 视觉效果[三]
4. css揭秘实战技巧 - 字体排印[四]
5. css揭秘实战技巧 - 用户体验[五]
6. css揭秘实战技巧 - 结构与布局[六]
7. css揭秘实战技巧 - 过渡与动画[七]

前言

1. 单侧投影
2. 不规则投影
3. 染色效果
4. 毛玻璃效果
5. 折角效果

一：单侧投影

首先，我们来说明一下box-shadow 属性值的含义：

box-shadow: 0px 0px 3px red inset;
第一个从参数：表示阴影水平向右的偏移量
第二个参数：表示阴影垂直向下的偏移量
第三个参数：表示阴影的模糊半径
第四个参数：表示阴影的颜色
第五个参数：表示扩张半径，根据该值对阴影进行扩大和缩写
第六个参数：表示阴影向内还是向外，默认是outset向外，也可以设置为inset。
复制代码

我们来看一下具体效果，首先是一个矩形：

效果1: 四周阴影：即偏移量为0

代码如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 0px 10px red;
复制代码

效果2: 两侧阴影

代码如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  5px -5px 10px red;
复制代码

效果3：单侧投影 这时，我们可能直接会想到，只设置垂直或者水平一个方向的偏移量不就可以了嘛， 代码如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 5px 10px red;
复制代码

实现的效果如下：

这时，我们才醒悟过来，我们设置的阴影宽度为10px, 对于垂直方向，因为我们设置了向下偏移10px, 所以看上去，top方向是没有任何阴影的，但是left和right方向不管怎么偏移，肯定会有其中一个方向是有阴影的，那么，怎么样才可以实现真正的单侧阴影呢？

啦啦啦，box-shadow的第四个长度参数隆重登场：它排在 模糊半径参数之后，称作扩张半径。这个参数会根据你指定的值去扩大或 (当指定负值时)缩小投影的尺寸。举例来说，一个 -5px 的扩张半径会把投 影的宽度和高度各减少 10px(即每边各 5px)。 代码如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -5px red;
复制代码

最终的效果如下：

效果4: 双侧投影

代码如下：

width: 200px;
height: 100px;
background: yellow;
box-shadow:  0px 10px 10px -10px red, 0px -10px 10px -10px red;
复制代码

二：不规则投影

首先，说明一下，什么是不规则投影，我们平时设置阴影可能大多数都是给一个正方形或者长方形，甚至圆来设置阴影，这些情况下，box-shadow的表现是非常好的，但是如何遇到一些不规则的图形呢？例如如下效果：

这里以气泡的效果为例：

首先，我们可以想到，这是由一个正方形加一个三角形实现的（三角形可以实现原理可以查看 第二节形状篇 ），我们先实现此效果：

代码如下：

div {
    width: 200px;
    height: 200px;
    background: #dfb311;
    position: relative;
    border-radius: 10px;
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}
div::after {
    content: '';
    display: inline-block;
    border: 20px solid #dfb311;
    border-color: transparent transparent transparent #dfb311;
    position: absolute;
    right: -40px;
    top: calc(50% - 20px);
}
复制代码

效果如下：

接下来，我们来设置阴影效果，我们很直接的想到box-shadow，我们在div元素中添加该属性：

div {
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)   
}
复制代码

效果如下：

此时，我们可以看到正方形的阴影效果有了，但是三角形还没有，那么我们再给三角形加一个box-shadow试试看

div::after{
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .5)
}
复制代码

效果如下：

怎么成这样了？原来三角形的实现原理其实本身就是一个正方形，只不过另外三条边框的颜色为透明，那么，接下来该如何给这种不规则的图形加阴影效果呢？答案就是采用css滤镜：drop-shadow();

div {
    filter: drop-shadow(2px 2px 10px rgba(0,0,0,.5));
}
复制代码

啦啦啦，这样就得到我们想要的效果啦。

三：染色效果

我们来看一下比较常见的一个效果：

默认情况下，是一种灰度图片，hover的时候，灰度消失，正常显示，那么如何设置这个灰度效果，就是我们本节要实现的效果，

方案一：让ui给两种场景的图片，然后切换即可，但是很显然这样会增加网络请求，而且如果要替换成另外一种效果，就要把所有图片全部替换，成本有点高。

方案二：给图片上层添加一层元素，并且设置透明度，这样看上去有染色效果，但是并不是真正的对图片进行了染色，同时也大大削弱了图片的对比度。

方案三： 采用滤镜的方案

首先，这是一张正常的图片：

我们来降低一下饱和度：

代码如下：

filter: sepia(1);
复制代码

效果如下：

我们再来提升一下饱和度：

代码如下：

filter: saturate(4);
复制代码

效果如下：

我们再来对每个像素的色相进行指定角度进行偏移

代码如下：

filter: hue-rotate(295deg);
复制代码

以上三种滤镜我们一起来使用：

filter: sepia(1) saturate(4) hue-rotate(295deg);
复制代码

效果如下：

这就是我们想要的效果（可能效果没有原图好哈，这里只是说明一下这几种滤镜的作用），而且，此时你可能有个疑问，到底我该设置多少的饱和度，或者色相呢？这就涉及到我们的色彩模型，参考链接：HSL色彩模型

四：折角效果

首先，我们来看一下，比较常见的一个折角效果：

方案一：直接让设计给一张背景

方案二：采用border去实现三角形，然后定位到右上角

方案三：采用渐变去实现

div {
    width: 300px;
    height: 200px;
    background: green;
    background:
            linear-gradient(to left bottom,
            transparent 50%, rgba(0,0,0,.4) 0)
            no-repeat 100% 0 / 2em 2em,
            linear-gradient(-135deg,
            transparent 1.5em, green 0);   
}
复制代码

效果如下：

转载于:https://juejin.im/post/5cbdafcbf265da037b6110f5