使用 CSS 重建 1883 年的日本烟花目录

前几天，我收到了作家罗宾·斯隆 (Robin Sloan) 发来的一封通讯，其中包含 1883 年日本烟花目录中一些精美旧页的样本：

这与 Codepen 的每周挑战“烟花”相吻合——所以我只需要尝试重新创造这些美丽的东西。

这就是我最终得到的结果——我对第 66 号物品和第 67 号物品的混合的诠释：

它涉及很多小而有趣的东西，我想分享！

颗粒状覆盖

为了获得粗糙、颗粒感的外观，我添加了一个覆盖整个页面的覆盖层 - 它位于-tag::after上，并且是使用Grainy Gradients Playground<body>制作的。

小星星/爆炸

较小的星星/爆炸是clip-path用我自己的工具“多边形到剪辑路径和 SVG”制作的——你可以在 Codepen 上找到它：

这个工具对我来说具有很大的情感价值，因为原始算法是由我的一位好朋友编写的，他不幸于 2020 年去世。

大星/爆炸

主爆炸由一个组成，grid所有项目都放置在中心，使用grid-column: 1/-1和grid-row: 1/-1。这对我来说是新的position: absolute，但增加了灵活性。每个<b>子节点都有自己的--deg(degree) 属性，总共 36 个，每个子节点之间的度数为 10。

在这些之上，我放置了一个带有的面具repeating-conic-gradient来“切出”内部的堆叠<b>：

--mask: repeating-conic-gradient(
  from 45deg at 50% 50%,
  var(--red) 0deg 7.5deg,
  transparent 7.5deg 10deg);

Google 字体 API

我使用了两种字体，一种用于数字，一种用于“&”符号。加载所有字符集会非常浪费带宽，幸运的是，Google 字体支持text在 URL 中使用 -parameter 参数指定所需的字符：

/* Numero Sign and Numbers */
@import url('fonts.googleapis.com ... &text=№67');
/* Other font, Ampersand */
@import url('fonts.googleapis.com ... &text=%26');

口罩和其他物品

在黑色背景上和带有数字的框上，我使用了在Open Props上找到的面具。
我正在使用cqi-units（容器查询），因此它完全响应。
我正在使用原生 CSS 嵌套，因此不要在 Firefox 中预览 ;-)

您可以在此处看到最终结果：

动画版

文章来源：https://dev.to/madsstoumann/re-creating-a-japanese-fireworks-catalog-from-1883-in-css-83j