Web技巧(06)

時間 2019-12-11

標籤 web 技巧欄目 HTML 简体版

原文原文鏈接

在上一期中咱們提到了CSS的混合模式算法和濾鏡相關的知識，正好在這週週會老闆也提到濾鏡相關的特性。主要使用濾鏡來改變顏色和使用混合模式來讓視頻變得更有意思。那在這一期中，咱們接着來聊CSS濾鏡對顏色的處理以及濾鏡對圖標（圖像）的處理。除了濾鏡來改變顏色相關的知識以外，還會向你們介紹有關於CSS中Clipping的相關運用。javascript

CSS的Clipping實際上是CSS Masking Module Level 1規範中的一部分，前段時間花了幾天時間整理了有關於Clipping相關的知識，感興趣的話能夠閱讀《探索CSS Masking模塊：Clipping》一文。css

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等關鍵詞。html

不過，在不少同窗的世界中，若是說到顏色，估計除了會想到color屬性以外，還會想到border-color、background-color、陰影顏色和漸變顏色等，但事實上，CSS Color Module只聊color、opacity和這兩個屬性的值。雖然這兩個規範聊得只是color相關的知識，但color屬性的值一樣能夠運用於任何涉及到顏色相關的屬性，好比border-color、background-color等。java

在CSS Color Module Level 4更強大，提供了更多的顏色函數，好比gray()、lab()、lch()、hwb()、color()和device-cmyk()等函數。而顏色的計算和轉換是至關複雜的。css3

@Jamie Wong 在《Color: From Hexcodes to Eyeballs》一文中就詳細介紹了顏色相關的一些計算。web

看到這張圖是否是感受顏色相關的原理很是的複雜。若是須要完全的搞懂上圖，那就須要花必定的時間去閱讀上面的文章。固然，咱們可讓事情變得簡單些，咱們能夠了解一些JavaScript操做CSS顏色的相關知識。甚至還能夠更簡單一些，我就只搞懂CSS中color規範中的相關知識。那麼就有必要花點時間去閱讀上面提到的兩個版本的規範。算法

若是你以爲閱讀規範較累，難懂，那也能夠移步閱讀一下下面相關的文章：xcode

CSS filter改變顏色

估計不少同窗都和我同樣，以爲CSS的濾鏡只是用來作一些效果上的處理。好比對一個元素，或圖片等作一些特殊效果處理，更多的仍是但願使用CSS的Filter Effects Module Level 1來實現相似圖像編輯軟件中濾鏡相關的特效。事實上呢？CSS filter屬性和多個屬性值的結合還能夠作不少有趣的事情，好比將invert()、sepia()、saturate()、hue-rotate()、brightness()和contrast()幾個函數結合起來，能夠任何一個顏色更換成你想要的任何顏色。好比下面這個示例，你想將#000經過filter換成#f36：ide

事實上顏色仍是略有差別：svg

咱們嘗試修改原色，但最終獲得的顏色都是接近#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能夠幫助咱們作更多的事情。好比：