<css-doodle>给你的网站加点花哨!

theme: smartblue

这是我参与11月更文挑战的第17天，活动详情查看：2021最后一次更文挑战

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，邀你进群，一起学习交流前端，成为更优秀的工程师～关注公众号：半夏话前端,了解更多前端知识！点我探索新世界！

前言

在开发个人博客的时候，总想着尽可能的花哨一下！本来网站的背景是跟掘金一个颜色的，后来换成了linear-gradient渐变的背景

大概就是这样子的，看上去还是很舒服的。不过呢，我觉得呀还是不过画，于是呢我就开始去谷歌搜索，各种网站的设计。最后让我找到了一个神器！

css-doodle

翻译成中文就是涂鸦的意思。官方介绍：css-doodle是基于 shadow DOM v1和custom Elements v1。 对于这两个东西我是第一次见到，我搜了几篇文章感觉shadow DOM类似其他语言的函数封装，他将结构样式行为封装起来，与页面上的其他东西分开。custom Elements就是Web Components 允许开发者自定义标签的一个特性。

css-doodle本质上其实是根据CSS去生成div网格。

安装

官方提供了两种安装方式：

1. <script src="https://unpkg.com/css-doodle@0.21.6/css-doodle.min.js"></script>

2.  npm install css-doodle
    
    /* import it */
    import 'css-doodle';
   

用法

css-doodle基于css的语法，并且它本身还提供了很多其他的属性值。包括属性，选择器，函数，以及js api.

示例

例如下面这个官方提供的例子：

css-doodle的自定义标签是<css-doodle>.这里的click-to-update就是自带的js方法，这个方法通过应为就知道，当点击的时候，会更新涂鸦。标签内部可以直接写style标签，当然本来html也支持这么写。style里面通过:doodle来使用自带的属性。同时也可以写css原生的属性。

<css-doodle click-to-updatee>
  <style>
    :doodle {
      @grid: 18 / 100vmax;
      background: #0a0c27;
    }
    --hue: calc(180 + 1.5 * @row * @col);
    background: hsl(var(--hue), 50%, 70%);
    margin: -.5px;
    transition: @r(.5s) ease;
  </style>
</css-doodle>

详细步骤

1. 定义<css-doodle>元素，并添加:doodle选择器，我们可以在其中添加各种属性。

   <css-doodle> 
       :doodle {} 
   </css-doodle>
   

2. 定义网格

   :doodle { 
      @grid: 5x5;     
   } 
   

   这里还可以定义网格的大小之类。例如定义宽高

   width: 8em; height: 8em; 也可使用@size
   

3 使用其他自带方法，

例如下面@rand(.1,.9)

通过设置简单的颜色加上一个scale的随机放大缩小，就可以制作出一个花哨的背景。

<css-doodle>
    :doodle {
        @grid: 10x10;
        @size: 100vmax;
        grid-gap: 1px;
    }
   background-color: hsla(@r(360), 85%, @r(70%, 90%), @r(.9));
  transform: scale(@rand(.1,.9));
</css-doodle>

4. 自定义形状

在css-doodle中你还可以使用自定义形状。

clip-path: @shape(
  points: 300;
  r: cos(4t);
);

简单的几行代码就是一朵花。