css-doodle_如何使用CSS Doodle用CSS绘制图案

css-doodle

CSS帮助我们以各种方式发挥创造力，今天，我们将把CSS创造力提升到一个新的水平。 我们将使用一个称为CSS Doodle的工具来创建一些很棒的重复模式。

CSS Doodle是一个Web组件，您可以像使用其他任何HTML标记（例如<css-doodle> ）一样使用它。 我们将从基础知识开始，学习如何安装和使用它，然后我们将创建四个独特的模式。 查看视频教程，或向下滚动以阅读书面版本，然后查看我们要构建的内容。

CSS Doodle模式

如何安装CSS Doodle

要开始使用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>

让我们坚持后者。 请注意@符号，用于Doodle专用语法。 现在我们需要添加一些其他值，例如总大小和网格间距：

<css-doodle>
    :doodle {
        @grid: 5x5;
        @size: 10rem;
        grid-gap: 1px;
    }
    background-color: tomato;
</css-doodle>

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

玩这些值，看看会得到什么。 例如，让我们更改单元格的数量，并在size上使用不同的度量单位（ vmax ），以帮助我们填充整个屏幕（ 1vmax等于视口宽度或视口高度的百分之一，具体取决于较大）：

控制CSS Doodle

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

例如，我可以将转换属性与随机比例函数一起使用，因此每个像元在值.1和.9之间随机缩放：

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

这就是给我们的：

以这种方式使用随机函数非常有用，并且可以使我们生成各种很酷的模式。 我们采用同样的思维HSL格式的颜色，使用随机数字的色调，饱和度，亮度和阿尔法值（注意使用@r()这是一个简写@rand()但不完全一样）：

为什么不通过应用以下方法添加更多混乱：

• 随机translate3d
• 随机border-radius
• 改变网格间隙

将图案固定为背景

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

.doodle {
    position: fixed;
    z-index: -1;
}

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

演示＃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;

这是最终结果！

演示＃3

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

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

然后，我们将应用“原始” 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标记。

演示＃4

我们的最后一个演示使用了很少的代码，但是像以前一样从一个基本的网格开始。

<css-doodle>
     :doodle {
		@grid: 25 / 100vmax;
 	}
</css-doodle>

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

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

然后在background属性中使用此变量来决定色调：

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

通过剪切路径的形式进行最后的触摸，我们得到以下信息：

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

结论

你知道“天空是极限”吗？ 在这种情况下，“ CSS是极限”！ 无论您使用CSS做什么，都可以将其应用于CSS Doodle。 玩得开心–我迫不及待想看到您创造的东西！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-draw-patterns-with-css-using-css-doodle--cms-33110

css-doodle