css揭秘笔记——视觉效果

realitycss 2019-06-25

投影

知识点

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]?

注意:

  • 在元素正下方的投影被裁切掉了,是没有的;而text-shadow不同,文字下方的投影不会被裁切。

  • box-shadow的第三个参数是模糊半径,假如设置4px,则投影尺寸比元素本身大8px.

  • box-shadow第四个参数是扩张半径,指定整数是扩大,负数为缩小。

单侧投影

box-shadow: 0 10px 8px -8px black;

css揭秘笔记——视觉效果

邻边投影

box-shadow: 6px 6px 12px -6px black;

css揭秘笔记——视觉效果

双侧投影

box-shadow无法单独指定水平或垂直方向上的放大或缩小,所以只能用两层投影达到目的。

box-shadow: 6px 0 12px -6px black, -6px 0 12px -6px black;

css揭秘笔记——视觉效果

不规则投影

box-shadow给矩形或用border-radius生成的形状加投影很完美,但给除此之外的形状加投影,就不太行了。比如:

border:10px dashed orange; 
box-shadow: 2px 2px 3px rgba(0,0,0,.5);

css揭秘笔记——视觉效果

可以使用css新属性滤镜filter,使用一些函数,如blur()、grayscale()、drop-shadow()等等,就可以达到想要的效果。drop-shadow()的参数除了没有扩张半径和关键字inset,其他和box-shadow一样,但它不支持逗号分隔的多层投影语法。

border:10px dashed orange; 
filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));

css揭秘笔记——视觉效果

background: linear-gradient(45deg, transparent 20px, orange 0) left bottom /50%,
    linear-gradient(-45deg, transparent 20px, orange 0) right bottom /50%,
    linear-gradient(135deg, transparent 20px, orange 0) left top /50%,
    linear-gradient(-135deg, transparent 20px, orange 0) right top /50%;
background-repeat: no-repeat;
filter: drop-shadow(2px 2px 5px rgba(0,0,0,.5));

css揭秘笔记——视觉效果

.talkbox{
    background-color: orange;
    border-radius: 20px;
    position: relative;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,.5));
}
.talkbox::after{
    content: '';
    display: block;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    border-left: 25px solid orange;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    position: absolute;
    top: 25%;
    left: 100%;
}

css揭秘笔记——视觉效果

需要注意的是,任何非透明的部分都会被drop-shadow()打上投影。(这并不是一种很好的体验)

color: orange; border: 10px solid; 
text-shadow: 2px 2px yellowgreen; 
filter: drop-shadow(2px 2px 2px black);

css揭秘笔记——视觉效果

染色效果

使用filter给图片添加滤镜效果。主要用到了sepia()saturate()hue-rotate()这些函数。

原图
css揭秘笔记——视觉效果

sepia() 降饱和度的橙黄色染色效果
css揭秘笔记——视觉效果

saturate() 提升饱和度
css揭秘笔记——视觉效果

hue-rotate() 把每个像素的色相进行偏移,偏到粉色
css揭秘笔记——视觉效果

还可以加过度动画,最终的代码是

.filter-img{
    transition: .5s filter;
    filter: sepia(.5) saturate(4) hue-rotate(295deg);
 }

 .filter-img:hover,
 .filter-img:focus{
    filter: none;
 }

混合模式的方案

为了避免上面那种滤镜方式的褪色和不自然的效果,还可以使用“混合模式”,这种方式控制了上层元素的颜色和下层颜色进行混合的方式。实现染色效果的混合模式是luminosity,它会保留上层元素的hsl高亮信息,并从它的下层吸取色相和饱和度信息。

具体还可以分为两种方式。
方式一:

<div style="background: hsl(335, 100%, 50%);">
    <img style="mix-blend-mode: luminosity;" src="./image/flower.jpg" alt="">
</div>

css揭秘笔记——视觉效果

方式二:

<div class="tinted-img"></div>

.tinted-img{
    background: url(./image/flower.jpg);
    width: 300px; height: 300px; 
    background-size: cover; 
    background-color: hsl(335, 100%, 50%); 
    background-blend-mode: luminosity; 
    transition: .5s background-color;
}

.tinted-img:hover{
    background-color: transparent;
}

css揭秘笔记——视觉效果

这里需要说明一下,混合模式不像滤镜一样可动画。使用background-blend-mode属性可以让每层背景跟它的下层背景进行混合。当我们只有一个背景图像及一个透明背景色时,就不会有任何混合效果。所以动画可以在这个原理上进行设置。

毛玻璃效果

场景:背景是花哨的图片,在文字下面使用半透明颜色保证文本的可读性。

<div class="wrapper">
    <div class="main">
        <p> Lorem ipsum dolor sit amet...</p>
    </div>
</div>

失败案例一:

.wrapper{
    background: url(./image/flower.jpg) 0 / cover;
}
.main{
    background: hsla(0, 0%, 100%, .3);
}

css揭秘笔记——视觉效果

字体不清晰,调高透明度的值:

css揭秘笔记——视觉效果
不太美观。。。

失败案例二:
使用blur()滤镜。

.main{
    filter: blur(2px);
}

css揭秘笔记——视觉效果
(⊙o⊙)… 连字体都模糊了。

解决方案:
按照之前提到过的“平行四边形”的方案,为伪元素设置模糊滤镜,而不会影响文本。

.wrapper{
    width: 600px; height:300px; 
    background: url(./image/flower.jpg) 0 / cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main{
    width: 70%;
    height: 65%;
    padding: 1em;
    font-size: 1.2em;
    background: hsla(0, 0%, 100%, .3);
    position: relative;
    z-index: 1; /*定位元素z-index不为auto时,会创建层叠上下文*/
    overflow: hidden;
}
.main::before{
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: url(./image/flower.jpg) 0 / cover;
    filter: blur(20px);
    z-index: -1;/*负的z-index会下降到其所在的层级上下文的背景之上,在这里也就是.main元素的背景之上,文本以下。*/
    margin:-30px; /*由于边缘的模糊效果会按模糊半径的长度削减,所以要将模糊元素扩展出去,同时父元素要对延伸出去的部分hidden*/
}

css揭秘笔记——视觉效果

效果出来了,但是需要说明一点,就是层叠顺序的问题,如果直接在伪元素设置z-index为0的话,它会直接跑到最外层背景颜色下方,所以这个层叠顺序很复杂,可以参考下文:
深入理解CSS中的层叠上下文和层叠顺序

看了文章发现,很多属性都可以创建层叠上下文,如display:flexfiltermix-blend-mode等等。

折角效果

45°折角

background: #58a; /*回退样式*/
background: 
linear-gradient(-135deg, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
linear-gradient(-135deg, transparent 1.5em, #58a 0);

注意,1.5em是通过三角形计算得到,√2em取整为1.5。

css揭秘笔记——视觉效果

其他角度折角

每个角度都需要复杂的计算,这里以30°为例。非45°折角和45°折角不同的是,反折过来的角是不一样的。所以实现思路就不同了。使用伪元素模拟折角,计算得到的长宽和背景切角相反;以右下角为中心逆时针旋转30°;再向上移动一段距离(要调动初中几何的功底了),就可以了;最后加点装饰更真实。

.note{
    background: #58a; 
       background:linear-gradient(-150deg, transparent 1.5em, #58a 0);
    position: relative;
    /*装饰*/
    border-radius: .5em;
}
.note::before{
    content: "";
    width: 1.73em;
    height: 3em;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.2) 0, rgba(0,0,0,.4));
    transform-origin: bottom right;
    transform: translateY(-1.3em) rotate(-30deg); /*注意:先平移再旋转和先旋转再平移效果是不一样的!*/
    /*装饰*/
    border-bottom-left-radius: inherit;
    box-shadow: -.2em .2em .3em -.1em rgba(0,0,0,.15);
}

代码不够DRY,只能使用预处理器的mixin了。

css揭秘笔记——视觉效果

相关推荐