如何使用 CSS Doodle 用 CSS 绘制图案

css 帮助我们以各种方式获得创意，今天我们将把我们的 CSS 创意提升到一个新的水平。我们将使用一个名为 CSS Doodle 的工具来创建一些很棒的重复图案。

CSS Doodle 是一个 Web 组件，您可以像使用任何其他 html 标签（例如<css-doodle>）一样使用它。我们将从基础开始，学习如何安装和使用它，然后我们将创建四种独特的模式。

如何安装 CSS 涂鸦

要开始使用 CSS Doodle，请访问css-doodle . com。在那里，您可以找到代码示例和可以用它创建的东西的启发性演示。 

在页面的“入门”部分下，您将看到一个指向库的 CDN 版本的链接，我们将抓取该库并直接插入 CodePen 以使用： 

https://cdnjs.cloudflare.com/ajax/libs/css-doodle/0.6.1/css-doodle.min.js

您可能更喜欢其他几个选项，但这是我们将在本教程中采用的路线。

我们实际上不需要为此编写任何 javascript 或任何 CSS，我们所做的一切都将在 HTML 中进行。

演示#1

当我们构建我们的第一个演示时，我们将介绍基本的设置要求。

首先创建一个自定义 <css-doodle>元素。这个元素是库的目标，我们添加的内容将决定生成的模式。然后我们添加:doodle选择器，我们可以在其中添加各种属性。

<css-doodle>    

:doodle {}

</css-doodle>

定义网格

下一步是定义网格。我们可以在选择器中执行此操作，也可以作为<css-doodle>标签上的数据属性执行此操作。所以我们的选择是以下之一：

<css-doodle grid="5">   

 :doodle {}

</css-doodle>

或者

<css-doodle>    

:doodle {        

@grid: 5x5;    

}</css-doodle>

让我们坚持后者。注意@涂鸦特定语法的符号。现在我们需要添加一些其他值，例如总大小和网格间隙：

<css-doodle>    

:doodle {        

@grid: 5x5;        

@size: 10rem;       

 grid-gap: 1px;    

}    

background-color: tomato;</css-doodle>

我们5x5的网格的网格间隙为1px，总宽度和高度为10rem，背景为tomato。

See the Pen  CSS Doodle Demo Setup by Envato Tuts+ (@tutsplus)  on CodePen.

玩转价值观，看看你得到了什么。例如，让我们更改单元格的数量，并在 上使用不同的测量单位 ( vmax)size来帮助我们填满整个屏幕（1vmax等于视口宽度或视口高度的百分之一，取决于哪个更大):

See the Pen  CSS Doodle Demo Setup ii by Envato Tuts+ (@tutsplus)  on CodePen.

控制 CSS 涂鸦

我们在选择器中声明的所有内容都会:doodle影响整个涂鸦。我们在选择器之外声明的所有内容都会:doodle影响每个单独的单元格。

例如，我可以使用带有随机缩放函数的变换属性，因此每个单元格在值.1和之间随机缩放.9：

transform: scale(@rand(.1,.9));

这是给我们的：

See the Pen  CSS Doodle Demo Setup iii by Envato Tuts+ (@tutsplus)  on CodePen.

以这种方式使用随机函数非常有用，可以让我们生成各种很酷的模式。让我们将相同的想法应用于 HSL 格式颜色，使用随机数字表示色相、饱和度、亮度和 alpha 值（注意使用的 @r()是简写版本，@rand()但完全相同）：

See the Pen  CSS Doodle Demo Setup iv by Envato Tuts+ (@tutsplus)  on CodePen.

为什么不添加更多的混乱，通过应用：

• 随机的translate3d

• 随机的border-radius

• 改变网格间隙

将图案固定为背景

我们要做的最后一点是应用一些样式来修复图案，以便我们可以将其用作其他元素后面的背景，例如在英雄块中。为此，我们向<css-doodle>元素添加一个额外的类名并应用以下 CSS：

.doodle {

    position: fixed;

    z-index: -1;

}

这是为网站英雄创建随机、独特的背景图形的好方法。试试看！

See the Pen  CSS Doodle Demo #1 by Envato Tuts+ (@tutsplus)  on CodePen.

演示#2

让我们重新开始，让自己成为另一种模式。我们将首先定义网格并为整个事物赋予背景颜色：

<css-doodle>

    :doodle {

        @grid: 10 / 100vmax;

        grid-gap: 4vmax;

        background: #B2DFDB;

    }

</css-doodle>

然后，我们将对每个单元格应用随机颜色、随机缩放变换和随机 translate3d 以改变每个单元格的位置。

<css-doodle class="doodle">

    :doodle {

        @grid: 10 / 100vmax;

        grid-gap: 4vmax;

        background: #B2DFDB;

    }

     

    transform: scale(@rand(.1, 1.9)) translate3d(@r(150px), @r(200px), 0) rotate(@r(360deg));

    background: hsla(@r(100), 85%, @r(90%, 100%), @r(.9));

</css-doodle>

应用基本形状

现在，这是很酷的部分。CSS Doodle 让我们可以访问一系列基本形状，所有这些都可以在 CSS Doodle 网页上找到。</css-doodle>我们将在结束标记之前添加以下规则：

@shape: clover 5;

这是最终结果！

See the Pen  CSS Doodle Demo #2 by Envato Tuts+ (@tutsplus)  on CodePen.

演示#3

对于我们的第三个演示，我们将添加一些新玩具。@pick我们将使用函数从值列表中选择来确定每个单元格的颜色：

background: @pick(#29B6F6, #FDD835, #5E35B1, #FFCCBC, #E8EAF6, #B2DFDB, #1B5E20, #2979FF);

然后我们将应用一个“vanilla” CSS 剪辑路径，每个三边多边形都有随机坐标：

clip-path: polygon(        

@rand(50%) 0, 50% @rand(70%), 0 @rand(100%)   

 );

最后，我们将使用一些 CSS 关键帧动画，再次使用一些随机值散布在其中以确保效果！这些规则将产生永动机。

animation: test infinite @r(100s, 150s) linear;

     

    @keyframes test {

        0% {

            transform: translate3d(0, 0, 0);

        }

        50% {

            transform: translate3d(@r(-500%, 1000%), @r(-500%, 1000%), 0);

        }

        100% {

            transform: translate3d(0, 0, 0);

        }

看看最终结果！有关如何创建的更多详细信息，请参见15:47处的视频版本。

See the Pen  CSS Doodle Demo #3 by Envato Tuts+ (@tutsplus)  on CodePen.

演示#4

我们的上一个演示使用很少的代码，但和以前一样从一个基本的网格开始。

<css-doodle>

     :doodle {

        @grid: 25 / 100vmax;

    }

</css-doodle>

然后我们定义一个名为 的 CSS 变量--hue，其值将根据网格单元格在网格中的位置而变化：

--hue: calc(100 + .5 * @row() * @col());

然后在背景属性中使用此变量来指示色调：

background: hsla(var(--hue), 50%, 70%, @r(.1, .9));

 以剪辑路径的形式进行最后一次接触，我们得到以下信息：

See the Pen  CSS Doodle Demo #4 by Envato Tuts+ (@tutsplus)  on CodePen.

有关我们最终演示的确切工作原理的详细信息，请查看 19:46 标记的视频教程。

结论

你知道“天空是极限”这句话吗？在这种情况下，“CSS 是极限”！无论你能用 CSS 做什么，你都可以应用到 CSS Doodle。玩得开心——我迫不及待地想看看你创造了什么！