Web技巧(06)
source link: https://www.tuicool.com/articles/2QNbuiE
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
在上一期中我们提到了CSS的混合模式算法和滤镜相关的知识,正好在这周周会老板也提到滤镜相关的特性。主要使用滤镜来改变颜色和使用混合模式来让视频变得更有意思。那在这一期中,我们接着来聊CSS滤镜对颜色的处理以及滤镜对图标(图像)的处理。除了滤镜来改变颜色相关的知识之外,还会向大家介绍有关于CSS中Clipping的相关运用。
CSS的Clipping其实是 CSS Masking Module Level 1规范 中的一部分,前段时间花了几天时间整理了有关于Clipping相关的知识,感兴趣的话可以阅读《 探索CSS Masking模块:Clipping 》一文。
CSS Color
在CSS中颜色是不可或缺的一部分,时至今日有关于CSS的颜色相关的规范主要有 CSS Color Module Level 3 和 CSS Color Module Level 4 两个版本。在CSS Color Module规范中主要定义了CSS的 color
和 opacity
属性和 color
属性的值,比如 rgba()
、 rgb()
、 hsl()
、 hsla()
、 hwb()
、 color-mod()
等颜色函数, transparent
和 currentColor
等关键词。
不过,在很多同学的世界中,如果说到颜色,估计除了会想到 color
属性之外,还会想到 border-color
、 background-color
、阴影颜色和渐变颜色等,但事实上,CSS Color Module只聊 color
、 opacity
和这两个属性的值。虽然这两个规范聊得只是 color
相关的知识,但 color
属性的值同样可以运用于任何涉及到颜色相关的属性,比如 border-color
、 background-color
等。
在CSS Color Module Level 4更强大,提供了更多的颜色函数,比如 gray()
、 lab()
、 lch()
、 hwb()
、 color()
和 device-cmyk()
等函数。而颜色的计算和转换是相当复杂的。
@Jamie Wong 在《 Color: From Hexcodes to Eyeballs 》一文中就详细介绍了颜色相关的一些计算。
看到这张图是不是感觉颜色相关的原理非常的复杂。如果需要彻底的搞懂上图,那就需要花一定的时间去阅读上面的文章。当然,我们可以让事情变得简单些,我们可以了解一些 JavaScript操作CSS颜色的相关知识 。甚至还可以更简单一些,我就只搞懂CSS中 color
规范中的相关知识。那么就有必要花点时间去阅读上面提到的两个版本的规范。
如果你觉得阅读规范较累,难懂,那也可以移步阅读一下下面相关的文章:
- 给你点颜色看看
- CSS 颜色体系详解
- CSS RGBA
- 玩转CSS的颜色
- 使用
color-mod()
函数修改颜色 - 使用CSS的
currentColor
变量扩展颜色级联 -
currentColor
让CSS更简短 -
currentColor
与CSS自定义属性之间的差异 - CSS技巧:
rgba()
函数的妙用
CSS filter改变颜色
估计很多同学都和我一样,觉得CSS的滤镜只是用来做一些效果上的处理。比如对一个元素,或图片等做一些特殊效果处理,更多的还是希望使用CSS的 Filter Effects Module Level 1 来实现类似图像编辑软件中 滤镜 相关的特效。事实上呢?CSS filter
属性和多个属性值的结合还可以做很多有趣的事情,比如将 invert()
、 sepia()
、 saturate()
、 hue-rotate()
、 brightness()
和 contrast()
几个函数结合起来,可以任何一个颜色更换成你想要的任何颜色。比如下面这个示例,你想将 #000
通过 filter
换成 #f36
:
事实上颜色还是略有差异:
我们尝试修改原色,但最终得到的颜色都是接近 #f36
颜色:
CSS filter
虽然可以组合一些属性将某一颜色转换成你希望的目的颜色,但最终颜色还是略有差异。
如果你或你的设计师对于颜色不会太过于苛刻的要求,那么这种方式还是有其一定的优势的。比如说,你要创建 Alert
这样的一个UI组件(Bootstrap):
使用 filter
转换出来的效果:
从上面的Demo中不难发现,使用CSS的 filter
将会影响所有的元素,比如 border-color
,文本颜色等,甚至其子元素也会有影响。因此在使用的时候,大家应该根据自己特有的场景来定。
使用 filter
来转换出你希望得到的颜色,其实有一个计算过程, 在Stackoverflow网站上有一个贴子详细的介绍了相关的计算原理 。依赖该原理,我们可以写一个转换工具,你只需要输入你的目标颜色,就可以帮你转换出来你想要的 filter
结果:
上面这个工具,建议原色设置为 #000
。
@张鑫旭 老司机也写过类似的一个工具 。你不难发现,目标颜色相同,但两个不同的工具计算出来的值是不一样的,感兴趣的同学不仿一试。造成这样的原因,应该是在转换计算的公式会有所不同。如果想一控究竟,那需要去了解颜色计算相关的底层原理。
另外 @Steven Bradley 的博文《 4 CSS Filters For Adjusting Color 》和 @Amelia Bellamy-Royds的博文《 Color Filters Can Turn Your Gray Skies Blue 》也提到过相关的计算知识,而且在文中还提到了SVG中滤镜的相关知识。
SVG中的滤镜特性要比CSS的 filter
强大的多,但有关于SVG滤镜相关的知识并不是今天我们要阐述的范围,如果你感兴趣的话,可以阅读@Sara Soueidan的《 SVG Filters 101 》:
另外在Codrops网站上还提供了很多关于 SVG Filter的教程和优秀案例 。也可以阅读 @Dirk Weber 的《 The Art Of SVG Filters And Why It Is Awesome 》教程。
除些之外,还有一些相关的教程:
CSS的 color-mod()函数改变颜色
从上面的示例中我们可以得知,使用CSS的 filter
可以达到你想要的任何颜色,但他有一个致命的缺点,那就是会影响元素所有元素。不过,在CSS Color Module Level 4中,提供了新的颜色函数,比如 color-mod()
函数 ,他同样可以让我们达到这样的目的。
同样的,如查我们想要将 #000
变成 #f36
,那么 color-mod()
会让我们变得同样的简单:
color(#000 red(255) green(51) blue(102))
效果如下:
这里不对 color-mod()
做过多的阐述,感兴趣的话可以阅读早前整理的一篇教程:《 使用 color-mod()
函数修改颜色 》。
当然,如果要人肉的来确定,好还是有点痛苦的,所以我们应该借助互联网上的一切有利工具。比如 @Tyler Gaw写的ColorMe 工具 就可以让我们把一切事情变得非常的简单:
使用ColorMe很简单,比如,通过ColorMe,基于 #29B4F0
颜色,调整不同的参数得出的颜色效果:
虽然 color-mod()
非常的强大,但要使用到项目中,还是需要再等一段时间。不过@Ahmad Shadeed就曾使用 rgba()
模拟出 color-mod()
函数的特性 。是不是很神奇。
color-mod()
函数将从CSS Color Module Level 4中移除,将会使用 color()
函数来替代。
CSS改变图标颜色的姿势
通过前面的学习,我们可以轻易的使用CSS的 filter
来改变颜色,达到所需的颜色,但这种技术并不是什么场合都可以使用。不过有一个地方,非常的实用,改变图片或图标的颜色,特别是用来改变任意格式的图标颜色。
先来看较为简单一点的,比如说我们想把一些彩色的图标换成 黑色 或 白色 的。
上图是所有图标的颜色,接下来采用 filter
将单数的图标变成 白色 ,把偶数的图标换成 黑色 :
div:nth-child(2n) img{ filter: brightness(0) invert(1); // => white } div:nth-child(2n+1) img { filter: brightness(0); // => black }
实际效果如下:
再来看纯色的图标,假设我们有一些这样的黑色图标:
借助CSS的 filter
来改变其颜色:
同样的, @Cassie Evans也写了一个在线工具 :
有关于这方面更多的介绍,可以阅读 @张鑫旭 老司机的教程:
对于图标的使用,曾经在《Web中的图标》有过详细的阐述。在Web中我们使用图标越来越多的采用SVG Icon。
有关于图标更多的介绍可以点击这里进行了解。
对于SVG图标的使用,如果需要改变图标的颜色还有其他的方式。比如通过 fill
属性在CSS中直接修改图标的颜色:
对于SVG的图标,我们可以在将在SVG图标源中将 fill
、 stroke
等设置颜色的属性设置为 currentColor
。这样可以直接继承祖先元素的 color
。有关于 currentColor
的详细介绍,要是感兴趣的话,可以阅读:
另外,如果你了解过 CSS Masking Module Level 1规范 的话,我们可以使用 mask
改变图标的颜色。通过 mask
的高亮模式或透明通道模式配合 background-color
来实现图标颜色的更换。
@ChokCoco在《 两行 CSS 代码实现图片任意颜色赋色技术 》中还提到使用CSS混合模式也仅只需要使用两行样式代码就可以改变图标颜色。
在好几期中从不同角度提到了CSS混合模式相关的技术, 如果你还从未接触过,建议你点击这里进行了解或学习 。
除此之外,@Cassie Evans 在《 The Many Ways to Change an SVG Fill on Hover (and When to Use Them) 》一文中还提到如何使用SVG滤镜来修改图标的颜色。
@Chris Coyier 在《 Change Color of SVG on Hover 》一文中还介绍了一些其他图片格式怎么来修改图标颜色,感兴趣的可以去看看。
简单的小结一下
在这一节中,我们看到了修改图标颜色有多种方式:
- 对于SVG的图标,可以直接在CSS中通过
fill
属性来修改颜色,建议和currentColor
配合使用 - 对于字体图标,可以直接使用
color
来修改颜色 - 使用CSS的
filter
来修改图标的颜色 - 使用SVG的
filter
来修改图标的颜色 - 使用Masking中的
mask
的高亮模式或透明通道模式配合background-color
,渐变,甚至再配合混合模式来修改图标颜色 - 使用CSS混合模式来修改图标的颜色
如果你还有其他的方式,欢迎在下面的评论中与我们一起分享。
混合模式和视频的结合
在分享会上看到@张鑫旭老师将视频和CSS混合模式结合在一起的使用案例,再次让我感到自己对相关知识的无知。
对于上面的效果, @张鑫旭老师写了一篇博文介绍了怎么将MP4格式的 video
视频背景色变成透明 。
video { mix-blend-mode: screen; }
看到这个示例,才想起早在2017年 @Dudley Storey就运用CSS混合模式和视频结合 起来做的 案例 :
使用到的代码也很简单:
figure { background: linear-gradient(90deg,#00f 50%,transparent 50.1%); } figure video { mix-blend-mode: overlay; }
在该 教程中@Dudley Storey还提到了如何使用CSS的 filter
来修改视频的控制bar 。同样的原理,@Peter Cooper也使用CSS的 filter
来修改 <audio>
控制器的皮肤:
CSS Clipping
最初我一直有一个误区,一直觉得 clip-path
和 mask
不是同一个范畴内的东西,这次重新阅读 CSS Masking Module Level 1规范 才知道,这两个属性都属于同一个规范模块中。前段时间一直在折腾这个规范,由于所涉及的内容较多,所以将整个内容分成两个部分,到目前为止完成了Clipping的内容,即《 探索CSS Masking模块:Clipping 》。
Clipping中主要包括 clip-path
、 clipPath
和 clip-rule
三个部分。在实际中,使用 clip-path
可以帮助我们做更多的事情。比如:
Web面包屑的效果
比如 @Silvestar Bistrović写的一个Demo :
详细的介绍可以阅读《 Oh, the Many Ways to Make Triangular Breadcrumb Ribbons! 》一文。
提示框Tooltip效果
详细的介绍可以阅读 @Sebastiano Guerriero的《 Creating rounded triangles in CSS with clip-path 》一文。
除了上面这几个效果之外,还有很多其他的效果,比如:
- Codepen上有关于
clip-path
的示例集锦 - @Mikael Ainalem 花了两篇文章的篇幅介绍了如何使用
clip-path
来写的一些互动效果 Part1 和 Part2 - @Dennis Gaebel Jr写的 如何使用
clip-path
实现一些动画效果
总结
这篇文章主要围绕着CSS的颜色展开,介绍了如何借助CSS的 filter
特性来改变颜色,进一步扩展了CSS中有哪些方式可以改变图片或图标的颜色。接着再介绍了CSS中Clipping给我们未来将会带来哪些可使用的场景。最后希望这篇文章对大家有所帮助。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK