Web技巧(06)

冷不防 2022-10-01 05:54 184阅读 0赞

在[上一期][Link 1]中我们提到了CSS的混合模式算法和滤镜相关的知识，正好在这周周会老板也提到滤镜相关的特性。主要使用滤镜来改变颜色和使用混合模式来让视频变得更有意思。那在这一期中，我们接着来聊CSS滤镜对颜色的处理以及滤镜对图标（图像）的处理。除了滤镜来改变颜色相关的知识之外，还会向大家介绍有关于[CSS中Clipping][CSS_Clipping]的相关运用。

> CSS的Clipping其实是[CSS Masking Module Level 1规范][CSS Masking Module Level 1]中的一部分，前段时间花了几天时间整理了有关于Clipping相关的知识，感兴趣的话可以阅读《[探索CSS Masking模块：Clipping][CSS_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][Color_ From Hexcodes to Eyeballs]》一文中就详细介绍了颜色相关的一些计算。

看到这张图是不是感觉颜色相关的原理非常的复杂。如果需要彻底的搞懂上图，那就需要花一定的时间去阅读上面的文章。当然，我们可以让事情变得简单些，我们可以了解一些[JavaScript操作CSS颜色的相关知识][JavaScript_CSS]。甚至还可以更简单一些，我就只搞懂CSS中`color`规范中的相关知识。那么就有必要花点时间去阅读上面提到的两个版本的规范。

如果你觉得阅读规范较累，难懂，那也可以移步阅读一下下面相关的文章：

*  [给你点颜色看看][Link 2]
 *  [CSS 颜色体系详解][CSS]
 *  [CSS RGBA][]
 *  [玩转CSS的颜色][CSS 1]
 *  [使用 `color-mod()` 函数修改颜色][_color-mod_]
 *  [使用CSS的 `currentColor` 变量扩展颜色级联][CSS_ _currentColor_]
 *  [`currentColor` 让CSS更简短][currentColor_ _CSS]
 *  [`currentColor`与CSS自定义属性之间的差异][currentColor_CSS]
 *  [CSS技巧：`rgba()`函数的妙用][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网站上有一个贴子详细的介绍了相关的计算原理][Stackoverflow]。依赖该原理，我们可以写一个转换工具，你只需要输入你的目标颜色，就可以帮你转换出来你想要的`filter`结果：

> *上面这个工具，建议原色设置为`#000`。*

[@张鑫旭 老司机也写过类似的一个工具][Link 3]。你不难发现，目标颜色相同，但两个不同的工具计算出来的值是不一样的，感兴趣的同学不仿一试。造成这样的原因，应该是在转换计算的公式会有所不同。如果想一控究竟，那需要去了解颜色计算相关的底层原理。

另外 @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的教程和优秀案例][SVG Filter]。也可以阅读 @Dirk Weber 的《[The Art Of SVG Filters And Why It Is Awesome][]》教程。

除些之外，还有一些相关的教程：

*  [CSS3 Filter的十种特效][CSS3 Filter]
 *  [高级CSS filters][CSS filters]
 *  [Advanced CSS filters][]

## CSS的 color-mod()函数改变颜色 ##

从上面的示例中我们可以得知，使用CSS的`filter`可以达到你想要的任何颜色，但他有一个致命的缺点，那就是会影响元素所有元素。不过，在CSS Color Module Level 4中，提供了新的颜色函数，比如[`color-mod()`函数][_color-mod_]，他同样可以让我们达到这样的目的。

同样的，如查我们想要将`#000`变成`#f36`，那么`color-mod()`会让我们变得同样的简单：

color(#000 red(255) green(51) blue(102))
    复制代码

效果如下：

这里不对`color-mod()`做过多的阐述，感兴趣的话可以阅读早前整理的一篇教程：《[使用`color-mod()`函数修改颜色][_color-mod_]》。

当然，如果要人肉的来确定，好还是有点痛苦的，所以我们应该借助互联网上的一切有利工具。比如 [@Tyler Gaw写的ColorMe 工具][Tyler Gaw_ColorMe]就可以让我们把一切事情变得非常的简单：

使用ColorMe很简单，比如，通过ColorMe，基于`#29B4F0`颜色，调整不同的参数得出的颜色效果：

虽然`color-mod()`非常的强大，但要使用到项目中，还是需要再等一段时间。不过@Ahmad Shadeed就曾使用[`rgba()`模拟出`color-mod()`函数的特性][CSS_rgba]。是不是很神奇。

> `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也写了一个在线工具][Cassie Evans]：

有关于这方面更多的介绍，可以阅读 @张鑫旭 老司机的教程:

*  [纯CSS实现任意格式图标变色的研究][CSS 2]
 *  [PNG格式小图标的CSS任意颜色赋色技术][PNG_CSS]
 *  [CSS `filter:hue-rotate`色调旋转滤镜实现按钮批量生产][CSS _filter_hue-rotate]

对于图标的使用，曾经在《[Web中的图标][Web]》有过详细的阐述。在Web中我们使用图标越来越多的采用SVG Icon。

> 有关于图标更多的介绍可以[点击这里][Link 4]进行了解。

对于SVG图标的使用，如果需要改变图标的颜色还有其他的方式。比如通过`fill`属性在CSS中直接修改图标的颜色：

对于SVG的图标，我们可以在将在SVG图标源中将`fill`、`stroke`等设置颜色的属性设置为`currentColor`。这样可以直接继承祖先元素的`color`。有关于`currentColor`的详细介绍，要是感兴趣的话，可以阅读：

*  [`currentColor`让CSS更简短][currentColor_ _CSS]
 *  [`currentColor`与CSS自定义属性之间的差异][currentColor_CSS]
 *  [使用CSS的`currentColor`变量扩展颜色级联][CSS_ _currentColor_]

另外，如果你了解过[CSS Masking Module Level 1规范][CSS Masking Module Level 1]的话，我们可以使用`mask`改变图标的颜色。通过`mask`的高亮模式或透明通道模式配合`background-color`来实现图标颜色的更换。

@ChokCoco在《[两行 CSS 代码实现图片任意颜色赋色技术][CSS 3]》中还提到使用CSS混合模式也仅只需要使用两行样式代码就可以改变图标颜色。

> 在好几期中从不同角度提到了CSS混合模式相关的技术，[如果你还从未接触过，建议你点击这里进行了解或学习][Link 5]。

除此之外，@Cassie Evans 在《[The Many Ways to Change an SVG Fill on Hover (and When to Use Them)][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`视频背景色变成透明][MP4_video]。

video {
        mix-blend-mode: screen;
    }
    复制代码

看到这个示例，才想起早在2017年 [@Dudley Storey就运用CSS混合模式和视频结合][Dudley Storey_CSS]起来做的[案例][Link 6]：

使用到的代码也很简单：

figure {
        background: linear-gradient(90deg,#00f 50%,transparent 50.1%);
    }
    figure video {
        mix-blend-mode: overlay;
    }
    复制代码

在该[教程中@Dudley Storey还提到了如何使用CSS的`filter`来修改视频的控制bar][Dudley Storey_CSS]。同样的原理，@Peter Cooper也使用CSS的`filter`来修改`<audio>`控制器的皮肤：

## CSS Clipping ##

最初我一直有一个误区，一直觉得`clip-path`和`mask`不是同一个范畴内的东西，这次重新阅读[CSS Masking Module Level 1规范][CSS Masking Module Level 1]才知道，这两个属性都属于同一个规范模块中。前段时间一直在折腾这个规范，由于所涉及的内容较多，所以将整个内容分成两个部分，到目前为止完成了Clipping的内容，即《[探索CSS Masking模块：Clipping][CSS_Clipping]》。

Clipping中主要包括`clip-path`、`clipPath`和`clip-rule`三个部分。在实际中，使用`clip-path`可以帮助我们做更多的事情。比如：

### Web面包屑的效果 ###

比如[@Silvestar Bistrović写的一个Demo][Silvestar Bistrovi_Demo]：

详细的介绍可以阅读《[Oh, the Many Ways to Make Triangular Breadcrumb Ribbons!][Oh_ the Many Ways to Make Triangular Breadcrumb Ribbons]》一文。

### 提示框Tooltip效果 ###

详细的介绍可以阅读 @Sebastiano Guerriero的《[Creating rounded triangles in CSS with clip-path][]》一文。

除了上面这几个效果之外，还有很多其他的效果，比如：

*  Codepen上有关于[`clip-path`的示例集锦][clip-path]
 *  @Mikael Ainalem 花了两篇文章的篇幅介绍了如何使用`clip-path`来写的一些互动效果[Part1][]和[Part2][]
 *  @Dennis Gaebel Jr写的[如何使用`clip-path`实现一些动画效果][clip-path 1]

## 总结 ##

这篇文章主要围绕着CSS的颜色展开，介绍了如何借助CSS的`filter`特性来改变颜色，进一步扩展了CSS中有哪些方式可以改变图片或图标的颜色。接着再介绍了CSS中Clipping给我们未来将会带来哪些可使用的场景。最后希望这篇文章对大家有所帮助。

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

[Link 1]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss%2Fcss-tips-0905-1.html
[CSS_Clipping]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss%2Fmasking-module-clipping.html
[CSS Masking Module Level 1]: https://link.juejin.im?target=%2F%2Fwww.w3.org%2FTR%2Fcss-masking-1%2F
[CSS Color Module Level 3]: https://link.juejin.im?target=%2F%2Fwww.w3.org%2FTR%2F2018%2FREC-css-color-3-20180619%2F
[CSS Color Module Level 4]: https://link.juejin.im?target=%2F%2Fwww.w3.org%2FTR%2F2019%2FWD-css-color-4-20190305%2F
[Color_ From Hexcodes to Eyeballs]: https://link.juejin.im?target=%2F%2Fjamie-wong.com%2Fpost%2Fcolor%2F
[JavaScript_CSS]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fjavascript%2Fhow-to-manipulate-css-colors-with-javascript.html
[Link 2]: https://link.juejin.im?target=%2F%2Fwww.leon82.com%2Fpost%2Fcolor-in-web.html
[CSS]: https://link.juejin.im?target=%2F%2Fwww.cnblogs.com%2Fcoco1s%2Fp%2F5622534.html
[CSS RGBA]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcontent%2Fcss3-rgba
[CSS 1]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss3%2Fplaying-with-css3-colors
[_color-mod_]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss4%2Fcolor-mod.html
[CSS_ _currentColor_]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss3%2Fextending-the-color-cascade-with-the-css-currentcolor-variable.html
[currentColor_ _CSS]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss3%2Fkeeping-css-short-with-currentcolor.html
[currentColor_CSS]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss%2Fcurrentcolor-vs-custom-properties.html
[CSS_rgba]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss%2Fthe-power-of-rgba.html
[Filter Effects Module Level 1]: https://link.juejin.im?target=%2F%2Fwww.w3.org%2FTR%2Ffilter-effects-1%2F
[Stackoverflow]: https://link.juejin.im?target=%2F%2Fstackoverflow.com%2Fquestions%2F42966641%2Fhow-to-transform-black-into-any-given-color-using-only-css-filters%2F43960991%2343960991
[Link 3]: https://link.juejin.im?target=%2F%2Fwww.zhangxinxu.com%2Fsp%2Ffilter.html
[4 CSS Filters For Adjusting Color]: https://link.juejin.im?target=%2F%2Fvanseodesign.com%2Fcss%2F4-css-filters-for-adjusting-color%2F
[Color Filters Can Turn Your Gray Skies Blue]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Fcolor-filters-can-turn-your-gray-skies-blue%2F
[SVG Filters 101]: https://link.juejin.im?target=%2F%2Ftympanus.net%2Fcodrops%2F2019%2F01%2F15%2Fsvg-filters-101%2F
[SVG Filter]: https://link.juejin.im?target=%2F%2Ftympanus.net%2Fcodrops%2Ftag%2Fsvg-filter%2F
[The Art Of SVG Filters And Why It Is Awesome]: https://link.juejin.im?target=%2F%2Fwww.smashingmagazine.com%2F2015%2F05%2Fwhy-the-svg-filter-is-awesome%2F
[CSS3 Filter]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss3%2Ften-effects-with-css3-filter
[CSS filters]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss3%2Fadvanced-css-filters.html
[Advanced CSS filters]: https://link.juejin.im?target=%2F%2Fiamvdo.me%2Fen%2Fblog%2Fadvanced-css-filters
[Tyler Gaw_ColorMe]: https://link.juejin.im?target=%2F%2Fcolorme.io%2F
[Cassie Evans]: https://link.juejin.im?target=%2F%2Fcodepen.io%2Fcassie-codes%2Ffull%2F561304e31eb955362b8d850d7eb7500e
[CSS 2]: https://link.juejin.im?target=%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2018%2F11%2Fcss-change-icon-color%2F
[PNG_CSS]: https://link.juejin.im?target=%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2016%2F06%2Fpng-icon-change-color-by-css%2F
[CSS _filter_hue-rotate]: https://link.juejin.im?target=%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2018%2F11%2Fcss-filter-hue-rotate-button%2F
[Web]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fcss%2Fweb-icons.html
[Link 4]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fblog%2Ftags%2F66.html
[CSS 3]: https://link.juejin.im?target=%2F%2Fwww.cnblogs.com%2Fcoco1s%2Fp%2F8080211.html
[Link 5]: https://link.juejin.im?target=%2F%2Fwww.w3cplus.com%2Fblog%2Ftags%2F409.html
[The Many Ways to Change an SVG Fill on Hover _and When to Use Them]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Fthe-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them%2F
[Change Color of SVG on Hover]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Fchange-color-of-svg-on-hover%2F
[MP4_video]: https://link.juejin.im?target=%2F%2Fwww.zhangxinxu.com%2Fwordpress%2F2019%2F05%2Fmp4-video-background-transparent%2F
[Dudley Storey_CSS]: https://link.juejin.im?target=%2F%2Fthenewcode.com%2F1020%2FHTML5-Video-Effects-with-CSS-Blend-Modes
[Link 6]: https://link.juejin.im?target=%2F%2Fcodepen.io%2Fdudleystorey%2Ffull%2FwavpGe
[Silvestar Bistrovi_Demo]: https://link.juejin.im?target=%2F%2Fcodepen.io%2FCiTA%2Ffull%2FywmQmb
[Oh_ the Many Ways to Make Triangular Breadcrumb Ribbons]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Foh-the-many-ways-to-make-triangular-breadcrumb-ribbons%2F
[Creating rounded triangles in CSS with clip-path]: https://link.juejin.im?target=%2F%2Fcodyhouse.co%2Fblog%2Fpost%2Fcss-rounded-triangles-with-clip-path
[clip-path]: https://link.juejin.im?target=%2F%2Fcodepen.io%2Ftag%2Fclip-path%2F
[Part1]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Fusing-css-clip-path-create-interactive-effects%2F
[Part2]: https://link.juejin.im?target=%2F%2Fcss-tricks.com%2Fusing-css-clip-path-to-create-interactive-effects-part-ii%2F
[clip-path 1]: https://link.juejin.im?target=%2F%2Fwww.smashingmagazine.com%2F2015%2F12%2Fanimating-clipped-elements-svg%2F