更多 Unicode 图案

创造是人们所能体验到的最激烈的兴奋。

——安妮·阿尔伯斯，《论设计》

我最近写了一篇文章——它在 CSS-Tricks 上被分享在这里——探讨了如何使用 Unicode 字符创建有趣的（和随机的）图案。从那时起，我一直在寻找新的字符来构建新的图案。我甚至从当地图书馆借了一本关于 Unicode 的书。

（顺便说一句，那是一本非常厚的书。）

发挥你的想象力，看看一个 Unicode 字符可以形成的图案。虽然并非所有字符都适合作为图案，但这个过程对我来说是一个很好的练习。

而且，除了 Unicode 本身之外，构建图案的方法可能并不那么明显。通常需要大量的灵感和反复试验才能想出新的图案。

更多平铺

实际上，有很多方法可以进行平铺。以下是我最喜欢的瓷砖图案之一，它可以使用CSS 网格轻松实现。

.grid {
  /* using `dense` to fill gaps automatically. */
  grid-auto-flow: dense;
}

.cell {
  /* using `span` to change cell size */
  grid-column-end: span <num>;
  grid-row-end: span <num>;
}

Grid Invaders 由 Miriam Suzanne 创建，是此技术的良好示例。

现在，我尝试将一些 Unicode 字符放入此网格中。最重要的是，根据其单元格的跨度更新font-size值。

我只在 Mac 上的 Chrome 上进行了测试。某些示例在其他浏览器/平台上可能看起来很糟糕。

.cell {
  /* ... */
  --n: <random-span>;
  grid-column-end: span var(--n);
  grid-row-end: span var(--n);
}

.cell:after {
  /* ... */
  font-size: calc(var(--n) * 2vmin);
}

这有点像标签云效果，但使用 CSS。可以通过这种方式创建许多图案。

列和行的span值并不总是必须相同。我们可以通过更改每个单元格跨越的行数来进行小的修改。

.cell {
  /* only change the row span */
  grid-row-end: span <num>;
}

由于font-size属性在两个方向（垂直和水平）上都会放大/缩小，因此将使用transform属性中的scaleY()代替。

:after {
  /* ... */
  transform: scaleY(calc(var(--span) * 1.4));
}

还有一个，它是通过将网格的内部容器旋转一定角度创建的。

三角形也可以使用clip-path绘制，并且更具响应性，但以不同的方式做一些事情也很不错。

对布局进行更多修改

.column-odd {
  transform: skewY(40deg);
}

.column-even {
  transform: skewY(-40deg);
}

现在，对每一列执行以下转换。

组合

许多 Unicode 对共享某种具有不同角度的形状。例如，括号、方括号和指向不同方向的不同箭头。我们可以使用此概念来组合形状并生成可重复的图案。

此图案使用小于号和大于号作为基础

:nth-child(odd):after {
  content: '<';
}

:nth-child(even):after {
  content: '>';
}

我们来看括号

:nth-child(odd):after {
  content: '(';
}

:nth-child(even):after {
  content: ')';
}

这些是我们每天都会使用的字符。但是，当它们以新的方式排列时，会给我们一种新鲜感和感觉。

还有另一对字符，᚛和᚜。将它们放置在网格中并缩放至适当的值，可以将它们连接在一起形成一个无缝图案。

就像用字符编织！我们甚至可以通过旋转事物来提升一个档次。

环

上周，我参加了一个CodePen 挑战，该挑战要求小组使用sub和sup元素进行设计。在尝试使用它们时，我注意到这两个标签在嵌套时会自动缩小。

因此，我尝试将它们放在一个圆圈周围。

.first-level {
  /* Slice the circle into many segments. */
  transform: rotate(
    calc(360deg / var(--slice) * var(--n))
  );
}

突然，我意识到此方法也可用于生成背景图案。结果非常不错。

sub:after, sup:after {
  content: '\003e';
}

有趣的是，更改单个字符最终可能会得到截然不同的结果。

总结

暂时就到这里！本文中使用的调色板来自Color Hunt和Coolors.co。

示例使用css-doodle生成，最后一节中的环形示例除外。此处的所有内容都可以在此 CodePen 集合中找到。

希望您喜欢它们，感谢您的阅读！