究極花里胡哨的漸變是什么樣子的？
本文屬于 CSS 繪圖技巧其中一篇，系列文章：
- 在 CSS 中使用三角函數(shù)繪制曲線圖形及展示動(dòng)畫[1]
- CSS奇思妙想 -- 使用 CSS 創(chuàng)造藝術(shù)[2]
將介紹一些利用 CSS 中的 background、mix-blend-mode、mask 及一些相關(guān)屬性，制作一些稍微復(fù)雜、酷炫的背景。
通過(guò)本文，你將會(huì)了解到 CSS background 中更為強(qiáng)大的一些用法，并且學(xué)會(huì)利用 background 相關(guān)的一些屬性，采用不同的方式，去創(chuàng)造更復(fù)雜的背景圖案。在這個(gè)過(guò)程中，你會(huì)更好的掌握不同的漸變技巧，更深層次的理解各種不同的漸變。
同時(shí)，借助強(qiáng)大的 CSS-Doodle，你將學(xué)會(huì)如何運(yùn)用一套規(guī)則，快速創(chuàng)建大量不同的隨機(jī)圖案，感受 CSS 的強(qiáng)大，走進(jìn) CSS 的美。
背景基礎(chǔ)知識(shí)
我們都知道，CSS 中的 background 是非常強(qiáng)大的。
首先，復(fù)習(xí)一下基礎(chǔ)，在日常中，我們使用最多的應(yīng)該就是下面 4 種：
純色背景 background: #000：
線性漸變 background: linear-gradient(#fff, #000) :
徑向漸變 background: radial-gradient(#fff, #000) :
角向漸變 background: conic-gradient(#fff, #000) :
背景進(jìn)階
當(dāng)然。掌握了基本的漸變之后，我們開(kāi)始向更復(fù)雜的背景圖案進(jìn)發(fā)。我最早是在《CSS Secret》一書中接觸學(xué)習(xí)到使用漸變?nèi)?shí)現(xiàn)各種背景圖案的。然后就是不斷的摸索嘗試，總結(jié)出了一些經(jīng)驗(yàn)。
在嘗試使用漸變?nèi)ブ谱鞲鼜?fù)雜的背景之前，列出一些比較重要的技巧點(diǎn)：
- 漸變不僅僅只能是單個(gè)的 linear-gradient 或者單個(gè)的 radial-gradient，對(duì)于 background 而言，它是支持多重漸變的疊加的，一點(diǎn)非常重要;
- 靈活使用 repeating-linear-gradeint(repeating-radial-gradeint)，它能減少很多代碼量
- transparent 透明無(wú)處不在
- 嘗試 mix-blend-mode 與 mask，創(chuàng)建復(fù)雜圖案的靈魂
- 使用隨機(jī)變量，它能讓一個(gè) idea 變成無(wú)數(shù)美麗的圖案
接下來(lái)，開(kāi)始組合之旅。
使用 mix-blend-mode
mix-blend-mode ，混合模式。最常見(jiàn)于 photoshop 中，是 PS 中十分強(qiáng)大的功能之一。在 CSS 中，我們可以利用混合模式將多個(gè)圖層混合得到一個(gè)新的效果。
關(guān)于混合模式的一些基礎(chǔ)用法，你可以參考我的這幾篇文章：
- 不可思議的顏色混合模式 mix-blend-mode [3]
- 不可思議的混合模式 background-blend-mode[4]
然后，我們來(lái)嘗試第一個(gè)圖案，先簡(jiǎn)單體會(huì)一下 mix-blend-mode 的作用。
我們使用 repeating-linear-gradient 重復(fù)線性漸變，制作兩個(gè)角度相反的背景條紋圖。正常而言，不使用混合模式，將兩個(gè)圖案疊加在一起，看看會(huì)發(fā)生什么。
額，會(huì)發(fā)生什么就有鬼了:sweat_smile: 。顯而易見(jiàn)，由于圖案不是透明的，疊加在一起之后，由于層疊的關(guān)系，只能看到其中一張圖。
好，在這個(gè)基礎(chǔ)上，我們給最上層的圖案，添加 mix-blend-mode: multiply，再來(lái)一次，看看這次會(huì)發(fā)生什么。
可以看到，添加了混合模式之后，兩張背景圖通過(guò)某種算法疊加在了一起，展現(xiàn)出了非常漂亮的圖案效果，也正是我們想要的效果。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode[5]
嘗試不同的 mix-blend-mode
那為什么上面使用的是 mix-blend-mode: multiply 呢?用其他混合模式可以不可以?
當(dāng)然可以。這里僅僅只是一個(gè)示例，mix-blend-mode: multiply 在 PS 中意為正片疊底，屬于圖層混合模式的變暗模式組之一。
我們使用上面的 DEMO，嘗試其他的混合模式，可以得到不同的效果。
可以看到，不同的混合模式的疊加，效果相差非常之大。當(dāng)然，運(yùn)用不同的混合模式，我們也就可以創(chuàng)造出效果各異的圖案。
CodePen Demo - Repeating-linear-gradient background & mix-blend-mode[6]
借助 CSS-Doodle 隨機(jī)生成圖案
到這，就不得不引出一個(gè)寫 CSS 的神器 -- CSS-Doodle[7]，我在其他非常多文章中也多次提到過(guò) CSS-doodle，簡(jiǎn)單而言，它是一個(gè)基于 Web-Component 的庫(kù)。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁(yè)面，并且提供各種便捷的指令及函數(shù)(隨機(jī)、循環(huán)等等)，讓我們能通過(guò)一套規(guī)則，得到不同 CSS 效果。
還是以上面的 DEMO 作為示例，我們將 repeating-linear-gradient 生成的重復(fù)條紋背景的顏色、粗細(xì)、角度隨機(jī)化、采用的混合模式也是隨機(jī)選取，然后利用 CSS-Doodle，快速隨機(jī)的創(chuàng)建各種基于此規(guī)則的圖案：
可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background [8]
嘗試使用徑向漸變
當(dāng)然，上面使用的是線性漸變，同樣，我們也可以使用徑向漸變運(yùn)用同樣的套路。
我們可以使用徑向漸變，生成多重的徑向漸變。像是這樣：
給圖片應(yīng)用上 background-size，它就會(huì)像是這樣：
像上文一樣，我們稍微對(duì)這個(gè)圖形變形一下，然后疊加兩個(gè)圖層，給最上層的圖形，添加 CSS 樣式 mix-blend-mode: darken：
CodePen Demo -- radial-gradient & mix-blend-mode Demo[9]
借助 CSS-Doodle 隨機(jī)生成圖案
再來(lái)一次，我們使用 CSS-Doodle，運(yùn)用上述的規(guī)則在徑向漸變，也可以得到一系列有意思的背景圖。
可以點(diǎn)進(jìn)去嘗試一下，點(diǎn)擊鼠標(biāo)即可隨機(jī)生成不同的效果：
CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2 [10]
當(dāng)然，上述的疊加都是非常簡(jiǎn)單的圖案的疊加，但是掌握了這個(gè)原理之后，就可以自己嘗試，去創(chuàng)造更復(fù)雜的融合。:dog:
上述的疊加效果是基于大片大片的實(shí)色的疊加，當(dāng)然 mix-blend-mode 還能和真正的漸變碰撞出更多的火花。
在不同的漸變背景中運(yùn)用混合模式
在不同的漸變背景中運(yùn)用混合模式?那會(huì)產(chǎn)生什么樣美妙的效果呢?
運(yùn)用得當(dāng)，它可能會(huì)像是這樣：
umm，與上面的條紋圖案完全不一樣的風(fēng)格。
你可以戳進(jìn) gradienta.io[11] 來(lái)看看，這里全是使用 CSS 創(chuàng)建的漸變疊加的背景圖案庫(kù)。
使用混合模式疊加不同的漸變圖案
下面，我們也來(lái)實(shí)現(xiàn)一個(gè)。
首先，我們使用線性漸變或者徑向漸變，隨意創(chuàng)建幾個(gè)漸變圖案，如下所示：
接著，我們兩兩之間，從第二層開(kāi)始，使用一個(gè)混合模式進(jìn)行疊加，一共需要設(shè)定 5 個(gè)混合模式，這里我使用了 overlay, multiply, difference, difference, overlay。看看疊加之后的效果，非常的 Nice：
CodePen Demo -- Graideint background mix[12]
由于上面動(dòng)圖 GIF 的壓縮率非常高，所以看上去鋸齒很明顯圖像很模糊，你可以點(diǎn)進(jìn)上面的鏈接看看。
然后，我們可以再給疊加后的圖像再加上一個(gè) filter: hue-rotate()，讓他動(dòng)起來(lái)，放大一點(diǎn)點(diǎn)看看效果，絢麗奪目的光影效果：
CodePen Demo -- Graideint background mix 2[13]
借助 CSS-Doodle 隨機(jī)生成圖案
噔噔噔，沒(méi)錯(cuò)，這里我們又可以繼續(xù)把 CSS-Doodle 搬出來(lái)了。
隨機(jī)的漸變，隨機(jī)的混合模式，疊加在一起，燥起來(lái)吧。
使用 CSS-Doodle 隨機(jī)創(chuàng)建不同的漸變，在隨機(jī)使用不同的混合模式，讓他們疊加在一起，看看效果：
當(dāng)然，由于是完全隨機(jī)生成的效果，所以部分時(shí)候生成出來(lái)的不算太好看或者直接是純色的。不過(guò)大部分還是挺不錯(cuò)的 :joy:
CodePen Demo -- CSS Doodle Mix Gradient[14]
感謝堅(jiān)持，看到這里。上述上半部分主要使用的混合模式，接下來(lái)，下半部分，將主要使用 mask，精彩繼續(xù)。
使用 mask
除去混合模式，與背景相關(guān)的，還有一個(gè)非常有意思的屬性 -- MASK。
mask[15] 譯為遮罩。在 CSS 中，mask 屬性允許使用者通過(guò)遮罩或者裁切特定區(qū)域的圖片的方式來(lái)隱藏一個(gè)元素的部分或者全部可見(jiàn)區(qū)域。
對(duì) mask 的一些基礎(chǔ)用法還不太熟悉的，可以先看看我的這篇文章 -- 奇妙的 CSS MASK[16]。
簡(jiǎn)單而言，mask 可以讓圖片我們可以靈活的控制圖片，設(shè)定一部分展示出來(lái)，另外剩余部分的隱藏。
使用 mask 對(duì)圖案進(jìn)行切割
舉個(gè)例子。假設(shè)我們使用 repeating-linear-gradient 漸變制作這樣一個(gè)漸變圖案：
它的 CSS 代碼大概是這樣：
- :root {
- $colorMain: #673ab7;
- }
- {
- background:
- repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
- repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),
- repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);
- }
如果我們給這個(gè)圖案，疊加一個(gè)這樣的 mask ：
- {
- mask: conic-gradient(from -135deg, transparent 50%, #000);
- }
上述 mask 如果是使用 background 表示的話，是這樣 background: conic-gradient(from -135deg, transparent 50%, #000), 圖案是這樣：
兩者疊加在一起，按照 mask 的作用，背景與 mask 生成的漸變的 transparent 的重疊部分，將會(huì)變得透明。將會(huì)得到這樣一種效果：
CodePen Demo -- mask & background Demo [17]
我們就完成了 background 與 mask 的結(jié)合。運(yùn)用 mask 切割 background 的效果，我們就能制作出非常多有意思的背景圖案：
CodePen Demo -- mask & background Demo [18]
mask-composite OR -webkit-mask-composite
接下來(lái)，在運(yùn)用 mask 切割圖片的同時(shí)，我們會(huì)再運(yùn)用到 -webkit-mask-composite 屬性。這個(gè)是非常有意思的元素，非常類似于 mix-blend-mode / background-blend-mode。
-webkit-mask-composite[19]: 屬性指定了將應(yīng)用于同一元素的多個(gè)蒙版圖像相互合成的方式。
通俗點(diǎn)來(lái)說(shuō)，他的作用就是，當(dāng)一個(gè)元素存在多重 mask 時(shí)，我們就可以運(yùn)用 -webkit-mask-composite 進(jìn)行效果疊加。
注意，這里的一個(gè)前提，就是當(dāng) mask 是多重 mask 的時(shí)候(類似于 background，mask 也是可以存著多重 mask)，-webkit-mask-composite 才會(huì)生效。這也就元素的 mask 可以指定多個(gè)，逗號(hào)分隔。
假設(shè)我們有這樣一張背景圖：
- :root {
- $colorMain: #673ab7;
- $colorSub: #00bcd4;
- }
- div {
- background: linear-gradient(-60deg, $colorMain, $colorSub);
- }
我們的 mask 如下：
- {
- mask:
- repeating-linear-gradient(30deg, #000 0, #000 10px, transparent 10px, transparent 45px),
- repeating-linear-gradient(60deg, #000 0, #000 10px, transparent 10px, transparent 45px),
- repeating-linear-gradient(90deg, #000 0, #000 10px, transparent 10px, transparent 45px);
- }
mask 表述成 background 的話大概是這樣：
如果，不添加任何 -webkit-mask-composite，疊加融合之后的效果是這樣：
如果添加一個(gè) -webkit-mask-composite: xor，則會(huì)變成這樣：
可以看到，線條的交匯疊加處，有了不一樣的效果。
CodePen Demo -- background & -webkit-mask-composite[20]
借助 CSS-Doodle 隨機(jī)生成圖案
了解了基本原理之后，上 CSS-Doodle，我們利用多重 mask 和 -webkit-mask-composite，便可以創(chuàng)造出各式各樣的美妙背景圖案：
是不是很類似萬(wàn)花筒?
借助了 CSS-Doodle，我們只設(shè)定大致的規(guī)則，輔以隨機(jī)的參數(shù)，隨機(jī)的大小。接著就是一幅幅美妙的背景圖應(yīng)運(yùn)而生。
下面是運(yùn)用上述規(guī)則的嘗試的一些圖案：
CodePen Demo -- CSS Doodle - CSS MASK Background[21]
當(dāng)然，可以嘗試變換外形，譬如讓它長(zhǎng)得像個(gè)手機(jī)殼。
下面兩個(gè) DEMO 也是綜合運(yùn)用了上述的一些技巧的示例，仿佛一個(gè)個(gè)手機(jī)殼的圖案。
CodePen Demo -- CSS Doodle - CSS MASK Background 2[22]
CodePen Demo -- CSS Doodle - CSS MASK Background 3[23]
總結(jié)一下
背景 background 不僅僅只是純色、線性漸變、徑向漸變、角向漸變。混合模式、濾鏡、遮罩也并不孤獨(dú)。
當(dāng) background 配合混合模式 mix-blend-mode，background-blend-mode、濾鏡 filter、以及遮罩 mask 的時(shí)候，它們就可以組合變幻出各種不同的效果。
到目前為止，CSS 已經(jīng)越來(lái)越強(qiáng)大，它不僅僅可以用于寫業(yè)務(wù)，也可以創(chuàng)造很多有美感的事物，只要我們?cè)敢馊ザ嗉訃L試，便可以創(chuàng)造出美妙的圖案。
最后
好了，本文到此結(jié)束，看到這里，你是不是也躍躍欲試?想自己親手嘗試一下?
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[24] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
如果還有什么疑問(wèn)或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬(wàn)望告知。
參考資料
[1]在 CSS 中使用三角函數(shù)繪制曲線圖形及展示動(dòng)畫:
https://github.com/chokcoco/iCSS/issues/72
[2]CSS奇思妙想 -- 使用 CSS 創(chuàng)造藝術(shù):
https://github.com/chokcoco/iCSS/issues/94
[3]不可思議的顏色混合模式 mix-blend-mode :
https://github.com/chokcoco/iCSS/issues/16
[4]不可思議的混合模式 background-blend-mode:
https://github.com/chokcoco/iCSS/issues/31
[5]CodePen Demo - Repeating-linear-gradient background & mix-blend-mode:
https://codepen.io/Chokcoco/pen/QWKwKbq
[6]CodePen Demo - Repeating-linear-gradient background & mix-blend-mode:
https://codepen.io/Chokcoco/pen/oNzNZyz
[7]CSS-Doodle:
https://css-doodle.com/
[8]CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background :
https://codepen.io/Chokcoco/pen/qBaBrqE
[9]CodePen Demo -- radial-gradient & mix-blend-mode Demo:
https://codepen.io/Chokcoco/pen/PoGwzgN
[10]CodePen Demo -- CSS Doodle - CSS MIX-BLEND-MODE Background 2 :
https://codepen.io/Chokcoco/pen/mdrdxpd
[11]gradienta.io:
https://gradienta.io/
[12]CodePen Demo -- Graideint background mix:
https://codepen.io/Chokcoco/pen/GRjgQMd
[13]CodePen Demo -- Graideint background mix 2:
https://codepen.io/Chokcoco/pen/BaLyYPv
[14]CodePen Demo -- CSS Doodle Mix Gradient:
https://codepen.io/Chokcoco/pen/abdaGWL
[15]mask:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask
[16]奇妙的 CSS MASK:
https://github.com/chokcoco/iCSS/issues/80
[17]CodePen Demo -- mask & background Demo :
https://codepen.io/Chokcoco/pen/ExgaROZ
[18]CodePen Demo -- mask & background Demo :
https://codepen.io/Chokcoco/pen/RwRzVeP
[19]-webkit-mask-composite:
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-composite
[20]CodePen Demo -- background & -webkit-mask-composite:
https://codepen.io/Chokcoco/pen/rNMaKgW?editors=1100
[21]CodePen Demo -- CSS Doodle - CSS MASK Background:
https://codepen.io/Chokcoco/pen/eYzwXRx
[22]CodePen Demo -- CSS Doodle - CSS MASK Background 2:
https://codepen.io/Chokcoco/pen/pobMgbX
[23]CodePen Demo -- CSS Doodle - CSS MASK Background 3:
https://codepen.io/Chokcoco/pen/WNGeaXb
[24]Github -- iCSS:
https://github.com/chokcoco/iCSS
