CSS 揭秘 - 读书笔记(其三)

发表于: 2016-08-29分类于:CSS

投影

box-shadow 属性可以用来给元素添加阴影。它完整的语法是这样的:

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

解释一下,inset 表示阴影出现在元素的内部,如果不写表示阴影出现在外边。然后可以提供 2~4 个长度值,加上一个颜色值。这 4 个长度值分别表示水平偏移量、竖直偏移量、模糊半径、扩张半径。

单侧投影

为了得到单侧投医,首先将横纵偏移量设置为 0 ,然后将模糊半径设置为 8px,这个时候会得到这个效果:

这个时候就需要用到第四个长度值,扩张距离表示阴影会从默认位置向外或向内扩张相应的长度。这里取一个负值,让阴影向内扩张(也就是向内收缩),为了将其他边的阴影完全收缩到看不见,需要将扩张半径设置为模糊半径的长度。

这个时候发现四个边都没有了阴影,那是因为阴影被容器盖住了,使用前两个长度值(偏移量)将阴影向需要添加阴影的边移动一定的长度,就可以得到我们要的效果——单侧阴影了。

这里说被容器覆盖,只是为了便于理解。实际上并没有覆盖一说,这可以将背景颜色设置为透明色来进行验证

最终的代码如下:

box-shadow: 0 8px 8px -8px #000;

可以通过修改偏移量,让藏在容器下方的阴影漏出来,就可以给任意边设置阴影了。

邻边投影

如果要让两条邻边有阴影,同时修改水平和竖直偏移量就好了,这很容易:

对边阴影

如果要给相对的边设置阴影呢?这个时候就需要用到 box-shadow 可以设置多组值得特性了:

box-shadow: 0 8px 8px -8px #000, 0 -8px 8px -8px #000;

不规则投影

box-shadow 可以很好地作用于那些规则的元素,但是某些情况下则会出现问题,这是因为 box-shadow 会老老实实地在元素的周围添加上阴影。但是考虑下面这个案例:

在这个元素的右下角通过渐变得到了一个透明的三角形,如果对它运用 box-shadow ,得到的效果就不是我们想要的:

我们其实只想给蓝色区域加上投影,解决办法是使用 filter 属性来到达期待的效果(只有新版本的浏览器才能看到效果):

filter: drop-shadow(0 0 5px #333);

filter 属性目前只有新版本的浏览器支持,且需要添加浏览器私有前缀,但是未来你就可以使用它来完成类似的效果了。可以参考这里了解更多关于 filter 的信息。

染色效果

有的时候需要对图片的色彩进行一些变换,比如增加饱和度、变为灰度图等等。在以前这可能需要动用像 Photoshop 这样的图像处理软件,但这会带来极大的维护成本,当图片的风格需要改变的时候,就不得不重新制作图片。现在好了,可以使用某些 CSS 属性来对元素的色彩进行变换。

基于滤镜的方案

使用 CSS 中的 filter 属性,可以给元素添加数十种滤镜效果,我之前写了一篇专门介绍 filter 的文章,可以参考 CSS filter - 滤镜效果 来了解 filter 的功能和使用方法。

比如这里,使用这段 CSS 给周董应用了这样的效果:

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

基于混合模式的方案

滤镜,能够对元素的颜色进行一些变换,这里还可以使用 混合模式 来对元素进行更多的颜色方面的变换。当元素发生重叠时混合模式控制了上层元素与下层元素颜色的混合方式。要对一个元素应用混合模式,有以下两个属性可以使用:

  • mix-blend-mode:可以为整个元素设置混合模式
  • background-blend-mode:可以为每层背景单独指定混合模式

假如现在需要将一幅图片和一个纯色进行混合,对于 mix-blend-mode,需要将图片放入一个容器内,并给容器设置需要混合的颜色。而对于 background-blend-mode,可以把图片设置为第一层背景,然后将颜色设置为第二层背景。

使用 mix-blend-mode 的效果:

使用 background-blend-mode 的效果:

如果你当前使用的是 PC,可以通过审查元素来调整图片的底色和混合方式来看看效果。

毛玻璃效果

我们常常看到毛玻璃效果,比如在 macOS 中就非常常见,启动 launchpad 就能看到这种效果。在网易云音乐中显示歌词的哪儿也使用了这种效果。说这么多不如一个例子,就下面这样的。那么在 web 上该如何实现这样的效果呢。

即刻出发

这里 dom 结构是这样的:

<div class="main">
    <p class="content">即刻出发</p>
</div>

这里需要用到 filter 属性中的 blur 滤镜来进行模糊处理。但是不能直接在 div.main 上面使用 filter 属性,这样会导致内容也一起被模糊掉了,需要对其子元素进行模糊处理,可以借助伪类,将其伪类绝对定位,铺满整个容器,然后进行模糊处理。在进行了模糊处理的元素上面展示内容。

主要的代码如下:

.main{
    position: relative;
    overflow: hidden;
}
.main::after{
    content: '';
    position: absolute;
    top: 0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    background: url(http://7xs1gu.com1.z0.glb.clouddn.com/maxresdefault.jpg) 0 / cover;
    -webkit-filter: blur(5px);
    filter: blur(5px);
}

进行模糊处理后模糊的区域会超出容器,因此设置 overflow 为 hidden 将超出的部分隐去。另外为了让伪元素在内容之下,可以调整 z-index 来改变其层叠次序。