一個製作Web圖案的組件css-doodle

Web中使用一些圖案做為背景圖案是一種時常可見的，早期一般都是通過圖片來完成。直至CSS一些新特性更趨成熟和穩定的時候，會通過CSS的相關技術，比如CSS的漸變屬性配合background-size之類的來做一些複雜而又美觀的Web圖案，運用於background-image之中。

而其中最為出名的是@Lea寫的CSS3 Patterns，並且@Lea在其《CSS Secrets》一書中特別介紹了CSS如何實現複雜背景圖案。雖然CSS Patterns實現的圖案是令人感到驚艷與好奇，但其擴展性以及適配性還是有一定的限制。因此有同學將CSS Patterns換成了SVG Patterns（也就是使用SVG相關的特性實現了CSS Patterns相同的效果）。當然，除此之外，還有很多工具能幫助我們來實現CSS圖案的效果，其中有的工具可以生成代碼，而有的工具會生成圖片。

隨著前端技術不斷的革新，不久前看到一個生成Web圖片的組件：<css-doodle /> —— 使用CSS繪製圖案的Web組件！

這是一個非常強大的Web組件，初次看到，你會覺得她非常的神奇和強大。至於為什麼？你要是花日間閱讀完後面的內容，你就知道其中的原委了。為了讓大家對其有初次的感覺，先上一個使用<css-doodle />組件創作的圖案效果，如下：

是不是有點蠢蠢欲動的感覺。如果是的話，跟著下面的節奏繼續往下閱讀。

什麼是<css-doodle />

<css-doodle />是一個Web組件。其基於Shadow DOM V1和Custom Elements V1來構建的。該組件可以幫助輕鬆的使用Custom Elements、Shadow DOM和CSS Grid創建任何你想要的圖案（CSS 圖案）。創建出來的圖案你可以運用於Web頁面中。

當你看到Custom Elements、Shadow DOM和CSS Grid的時候，你一定會心卻，這些東西瀏覽器能支持。事實上你的擔憂是正常的，因為該組件到目前為止只在最新的Chrome和Safari瀏覽器上可以正常的運行。如果你想運用於其他的瀏覽器上，你需要相關的Polyfilling。

簡單點說：

該組件通過其內部的規則（純CSS）會生成一系列的div構建的CSS Grid。你可以使用CSS輕鬆地操作這些div（單元格，每個div就是一個單元格）來生成圖案。生成的圖案既可以是靜態的，也可以是動態的。而其限制僅限於CSS本身的限制。

開始使用<css-doodle />

使用<css-doodle />組件創建圖案很簡單，當然有一個前提是你對其相關的API和使用方法有所了解。這裡先來看怎麼在你的項目中使用該組件。

使用<css-doodle />組件有兩種方法，第一種是比較原始的方法，就是在你的HTML文件中引入該組件所需要的JS和CSS文件。最簡單的方法就是直接引用cdnjs：

[xml] view plain copy

<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.3.0/css-doodle.min.js"></script>

這個script你可以在</head>或</body>結束標籤前調用。然後在任何你想要的地方調用：

[xml] view plain copy

<css-doodle> /* 繪製圖案的代碼放在這裡 */

</css-doodle>

如果你不想使用cdnjs提供的在線資源，你也可以將css-doodle-0.3.0.min.js文件下載到你本地的項目中，通過相對路徑來引用下載的文件。

除此之外，也可以通過npm的方式將<css-doodle />安裝到你的項目中，然後通過import的方式將其引入到你的項目中。比如說在Vue項目中，你可以先執行：

npm install css-doodle

或者使用yarn來安裝：

yarn add css-doodle

然後在你想要使用<css-doodle />的地方先import，比如在App.vue文件中：

[python] view plain copy

import CSSDoodle from "css-doodle"

然後你就可以在<template>中引用，比如：

這時在你的頁面中看到的效果如下：

這個時候，你和我可以一樣，對<css-doodle></css-doodle>中代碼一無所知，但正是這裡面的一些代碼生成了上圖這樣的效果。這個時候你通過瀏覽器開發者工具查看代碼的時候，你會看到生成的代碼如下圖所示：

基本語法

<css-doodle />的語法是基於CSS的，這一點需要特別記住 —— 一切能用於Web的CSS，都可以用於此處！。除此之外，他還提供了一些額外的實用函數和簡寫的屬性。這些函數和屬性可以在其官網中查閱。

有關於<css-doodle />提供的函數和屬性，在本文章中不做一一介紹，如果你想使用該組件來創作一些有意思的Web圖案，那非常有必要花一定的時間去閱讀官方文檔。並嘗試自己寫寫Demo。你會很快就能掌握這些規則和使用姿勢！

先看一個簡單示例

使用<css-doodle />其後台運行機制是使用CSS Grid布局創建一個網格系統。其實創建一個簡單的網格是<css-doodle />最為簡單的一個示例。比如說，我們創建一個5 x 8（五行八列）的網格，並且這個網格的width和其父容器的寬度相同（即100%）,高度為瀏覽器屏幕高度的五分之一。那麼我們就可以這樣寫代碼：

你將看到的效果如下：

特別注意：如果你的瀏覽器看不到任何的效果，請確認你使用的是最新版本的Chrome或Safari瀏覽器！後續的示例不再做相關的提示！

為了幫助沒時間閱讀官方文檔的同學能看懂上面的代碼，這裡簡單的做一下說明：

• :doodle：是一個特殊的選擇器，其指向的是組件元素本身，即<css-doodle />。注意，其樣式會被你的CSS樣式覆蓋
• @grid：創建一個網格，其後面配置的參數說明你要創建的網格。比如上面的示例5x8 / 100% 100vh;。其中5 x 8表示的是創建一個五行八列的網格；100%表示網格的寬度（和其容器寬度相同）；100vh表示網格的高度（瀏覽器屏幕的高度）
• :after：每個單元格的偽元素，用於生成內容，比如你在效果中看到的數字
• @index()：是一個函數，返回當前單元格的索引號，注意其開始值是從1開始
• @even：對應的偶數單元格，這裡將偶數單元格的背景顏色設置為#f36
• @odd：類似於@even，但對應的是奇數單元格

再來看一個複雜的示例

上面看到的效果是一個簡單的示例效果，使用了一些最基本的樣式規則寫了一個五行八列的網格。其實我們還可以利用<css-doodle />提供的一些函數和一些其他的CSS樣式規則，製作一些複雜的效果，而且還可以是帶有動效的。比如下面這個示例：

對應的效果如下：

效果是不是很炫，很酷!

• @place-cell：將單元格相對布局
• @size：設置單元格的width和height
• @rand：從數字的範圍內返回一個隨機值
• @pick：給定的列表中隨機選取一個值

正如你所見，在上面這個示例中，還使用了@keyframe來聲明動畫，並且還使用了CSS自定義屬性。再次驗證，只要是瀏覽器支持的CSS屬性都可能用於<css-doodle />。

帶有交互效果的案例

上面的示例，使用@keyframes可以做一個帶有動畫的效果。除此之外，還有更神奇的效果，那就是使用<css-doodle />的JavaScript API還可以實現現有交互效果的圖案。比如下面這個示例：

當我們滑鼠懸浮在上面的時，圖標會旋轉，這依舊採用的是@keyframes做的一個簡單動畫。除此之外，你點擊屏幕時，整個圖案會更新。

實現這樣的效果很簡單，就只是簡單的加了下面這麼幾行JavaScript代碼：

[php] view plain copy

const myDoodle = document.querySelector(".my-doodle"); myDoodle.addEventListener("click", () => { myDoodle.update(); });

使用了一個.update()函數，當你在屏幕單擊時，整個組件會使用給定的樣式重新刷新。

上面看到的是不同方式實現的一些圖案效果。除些之外，你可以發動你的大腦和創意，製作一些其他更有意思的圖案效果。如果你感興趣的話，可以看看@yuanchuan在Codepen整理的有關於<css-doodle />組件製作的一些圖案效果。

總結

這篇文章主要科普了一下<css-doodle />組件。簡單的回顧一下，該組件是一個Web組件，主要是基於Shadow DOM V1 和 Custom Elements V1 來構建的。而其背後運行的原理是使用CSS Grid和純CSS規則製作的一些圖案。除了CSS自帶的規則之外，該組件還封裝了一些函數和屬性，能讓你快速製作一些圖案。另外還你還可以使用Unicode字元創建一些字元圖案。

當你閱讀到這裡的時候，我想你對<css-doodle />組件有所了解，如果你動手了，或許你創作出一些與眾不同的圖案效果。希望你能在下面的評論中分享您的作品。如果你有其他的想法，也歡迎在下面的評論中分享。最後，該文章要是對您有所幫助的話，歡迎各位爺打個賞，鼓勵我繼續創作一些優質的教程。(^_^)

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！