你可能不知道的css-doodle
好久沒寫文章了，下筆突然陌生了許多。
第一個原因是剛找到一份前端的工作，業務上都需要盡快的了解，第二個原因就是懶還有拖延的習慣，一旦今天沒有寫文章，就由可能找個理由托到下一周，進而到了下一周又有千萬條理由拖到下下一周，所以解決的辦法就是當成任務來做，讓自律成為一種習慣，做起事來就不會有太大的抱怨。
行動起來，以後每周至少出一篇文章，輸出倒逼輸入，這也是更好學習的一種方式。
今天的主角是css-doodle，不知道有多少人知道的，反正我是第一次看到這個東西。
起因很簡單，大家都知道現在建立自己個人博客一個很方便免費的途徑就是使用Github Page來搭建自己的個人博客，但是配置博客的過程卻讓人特別煩惱，需要根據一個json文件配置博客的標題頭像分類等等，然後每個主題也需要配置各種屬性，而且在網上找到的教程裏面每個人都是根據自己的喜好編寫的一套配置，基本上不存在通用性。
於是我在想，有沒有一種圖形化的工具來進行這些配置呢？
還真讓我找到了，這個工具就是 gridea ，官方網站是 https://gridea.dev/
這個客戶端可以很方便的幫我們配置一些必要的網站配置，比如頭像目錄分類等等，而圖形化的方式讓我們專註於寫作而不是網站的一些配置，個人覺得非常方便，有興趣的可以試試。
但是今天的主角不是她（雖然很優秀），而是她後面的背景圖片，我當時不知道為什麽覺得背景很好看，就想把她扣下來，作為前端都知道，點擊鼠標右鍵，如果插入的是img標簽的話，可以直接保存圖片，如果沒有的話，那可能是插入的背景圖片，可以右鍵打開檢查，找到當前的元素對應的樣式，如果是插入的背景圖，在背景圖的鏈接上右鍵在新標簽頁打開，然後右鍵保存圖片即可。
然而，當我檢查元素的時候，發現並沒有我想要的背景圖，咦，那這到底是啥東東呢？
於是我發現了這個css-doodle元素，把這個標簽刪除後，果然背景就沒了。
果然是這個東西在搗鬼。
於是就有了本文，我們來稍微看看這是個什麽東東。
官網如下：https://css-doodle.com/
官方介紹是：A web component for drawing patterns with CSS. 一個繪制css圖案的組件。
先來看看怎麽使用：
首先使用script引入這個庫文件：
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script> // or <script src="https://unpkg.com/[email protected]/css-doodle.min.js"></script>
然後定義一個<css-doodle></css-doodle>標簽，用於容納所繪制的圖案。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<css-doodle></css-doodle>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
</html>容器有了，之後就是最重要的繪制圖案了。
我們先找一個簡單的示例分析，然後做一個自己的圖案出來。
<css-doodle>
:doodle {
@grid: 5;
@size: 30vmax;
grid-gap: 1px;
background: #f5f5f5;
}
background-color: hsla(@r(0,360), 70%, 70%, @r(.1,1));
transform: scale(@rand(.2, 1));
</css-doodle>然後我們可以得到下面的圖案：
結合官網分析代碼：
:doodle {
@grid: 5;
@size: 30vmax;
grid-gap: 1px;
background: #f5f5f5;
}
:doodle: 表示的是css-doodle元素
@grid: 圖案行列均為5，即為5x5的圖案
@size: 每一個圖案的大小。vmax表示相對於視口的寬度或高度中較大的那個。例如如果當前視口寬度500px，高度200px，那麽以視口寬度為參考，於是1vmin=5px。
grid-gap: 每個圖案的間隔為1px
background-color: hsla(@r(0,360), 70%, 70%, @r(.1,1));
@r: 即@rand的縮寫，用法@rand(start,end)，表示從start到end的隨機值。
於是我們就可以得到上面的圖案。
除了上面一些簡單的屬性之外，css-doodle官網還介紹了很多屬性：
下面說幾個常用到的：
@nth,@even,@odd,@at
@nth@even@odd@at都是對整個坐標下的圖案進行選擇的。例如：
/*對第五個圖案進行選擇*/ @nth(5) { background: #60569e; } /*選擇第四行，第二列的圖案*/ @at(4, 2) { background: #60569e; }
@grid
設置行列個數
比如：
:doodle {
@grid: 3x3; /*三行三列*/
@size: 8em;
}如果行列相同，可以省略一列，而且還可以和每一個圖案的大小寫在一起：
:doodle {
@grid: 8 / 8vmax; /*8行8列，每個圖案大小為8vmax*/
}@use
除了把樣式寫在css-doodle標簽內之外，還可以將樣式提出像style的方式書寫，如上面的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
:root {
--rule-a: (
:doodle {
@grid: 5;
@size: 30vmax;
grid-gap: 1px;
background: #f5f5f5;
}
background-color: hsla(@r(0,360), 70%, 70%, @r(.1,1));
transform: scale(@rand(.2, 1));
)
}
</style>
</head>
<body>
<css-doodle>
@use: var(--rule-a);
</css-doodle>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
</html>@size,@min-size,@max-size
設置一個圖案的大小，最小值和最大值。
@place-cell
設置當前圖案相對於當前單元格的相對位置：
Function的屬性就很多了，具體可以到官網查看，有很詳細的使用說明。
怎麽讓圖案動起來？
css-doodle還提供了JS API，使用js來控制圖案的顯示。
const doodle = document.querySelector('css-doodle'); // 選擇當前的css-doodle元素
doodle.grid = "5"; // 設置行列個數
console.log(doodle.grid); // 在控制臺打印當前的行列個數
doodle.use = 'var(--my-rule)'; // 指定當前css-doodle要顯示的圖案css
doodle.update( // 更新樣式
`
:doodle { @grid: 6 / 8em }
background: rebeccapurple;
margin: .5px;
`);
doodle.update(); // 刷新樣式有了這個知識，我們模仿 Gridea 主頁做一個背景圖，下面是我用emoji表情做的背景圖：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
:root {
--rule-emoji :(
:doodle {
@grid: 20 / 100vmax;
grid-gap: 1px;
background: #f9d654;
overflow: hidden;
}
transition: @r(1s) ease;
transform: scale(@rand(.1, 1)) rotate(@rand(0, 360)deg);
:after {
content: \@hex(@rand(0x1F600, 0x1F636)); /*將十六進制轉換成unicode編碼*/
opacity: @r(.1,1);
font-size: 3vmax;
}
)
}
</style>
</head>
<body>
<css-doodle>
@use: var(--rule-emoji);
</css-doodle>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js"></script>
<script>
const doodle = document.querySelector('css-doodle');
// 每次點擊刷新css-doodle
doodle.onclick = function () {
doodle.update();
};
</script>
</html>
你可能不知道的css-doodle