你可能不知道的css-doodle

CSS Ajax · 發表 2019-04-21 19:06:00

摘要：好久沒寫文章了，下筆突然陌生了許多。第一個原因是剛找到一份前端的工作，業務上都需要儘快的瞭解，第二個原因就是懶還有拖延的習慣，一旦今天沒有寫文章，就由可能找個理由託到下一週，進而到了下一週又有千萬條理由拖到下下一週，所以解決的辦法就是當成任務來做，讓自律成為一種習慣，做起事來就不會有太大...

好久沒寫文章了，下筆突然陌生了許多。

第一個原因是剛找到一份前端的工作，業務上都需要儘快的瞭解，第二個原因就是懶還有拖延的習慣，一旦今天沒有寫文章，就由可能找個理由託到下一週，進而到了下一週又有千萬條理由拖到下下一週，所以解決的辦法就是當成任務來做，讓自律成為一種習慣，做起事來就不會有太大的抱怨。

行動起來，以後每週至少出一篇文章，輸出倒逼輸入，這也是更好學習的一種方式。

今天的主角是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>