css技巧——视觉效果

242 阅读3分钟

单侧投影

顾名思义,只需要一侧有投影,使用box-shadow的第四个长度参数——扩张半径

 box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.5);

原理是这个值会根据指定的值去扩大或者缩小投影的尺寸,如果给一个负的扩张半径,它的值正好等于模糊半径,那么投影的尺寸就好和它所属的元素的尺寸完全一致,这个时候给投影一个y轴偏移量,就能在元素底部看见投影,而另外三侧是没有的

双侧投影

投影设置在元素的两条对边上

扩张半径在四个方向上的作用是均等的,所以唯一的办法是用两块投影来达到目的,也就是把单侧投影技巧运用两次

 box-shadow: 5px 0px 5px -5px black,
            -5px 0px 5px -5px black;

不规则投影

给矩形之类的不规则形状,例如对话气泡用伪元素生成的小尾巴,等添加投影

使用filter属性的drop-shadow()滤镜,这个滤镜接受的参数基本与box-shadow属性是一样的,但不包括扩张半径,inset关键字,和逗号分割的多层投影语法 例:

 .box {
            width: 200px;
            height: 200px;
            background-color: #bfa;
            filter: drop-shadow(2px 2px 5px #000);
            position: relative;
        }
        .box::after{
            content: "";
            display: block;
            width: 0;
            height: 0;
            position: absolute;
            bottom: -60px;
            left: 50%;
            transform: translateX(-50%);
            border-top: 30px solid skyblue;
            border-left: 30px solid transparent;
            border-right: 30px solid transparent;
            border-bottom: 30px solid transparent;
        }

在元素形状不规则的时候使用filter属性的drop-shadow()滤镜就能很方便的得到不规则投影

染色效果

为图片增加染色效果,比如把灰色图片变成彩色,或是反过来。可以在图片上层覆盖一层半透明的元素,这是一种办法,但这并不是真正的染色,还可以使用canvas用脚本进行染色,但这样非常麻烦,推荐使用以下两种方式

基于滤镜的方案

使用filter: sepia(),它会给图片增加一种降饱和度的黄橙色染色效果

使用filter: saturate(),它可以提升饱和度

使用filter: hue-rotate(),可以把每个像素的色相以指定度数进行偏移

三者也可以结合使用

filter: sepia(1) saturate(4) hue-rotate(195deg)

毛玻璃效果

不能直接对元素本身进行模糊处理,否则元素内容也会变得模糊,所以就先给该元素添加一个伪元素,然后将其定位在元素的下层,它的背景将无缝匹配到<body>元素的背景。

  body,.box::before {
            background: url("/3.jpg") 0 / cover fixed;
        }

        .box {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            width: 400px;
            height: 200px;
            line-height: 2;
            margin: auto;
            border-radius: 5px;
            background: rgba(255, 255, 255, .3);
            box-shadow: 3px 3px 6px 3px rgba(0, 0, 0, .3);
            overflow: hidden;
        }

        .box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            filter: blur(20px);
            z-index: -1;
            margin: -30px;
        }

未完待续.........