创建一个图片网站……无需任何图片

AWS 安全上线！

Divtober 是一项十月举行的编程挑战赛。目标是创作 CSS 艺术作品，但有一个简单但关键的条件：只使用一个 <div> 元素（或任何其他 HTML 元素，只要只有一个即可）。因此得名：Div + October = Divtober。

Lynn Fisher除了从事常规的网页设计师和开发人员工作外，还组织并推广了这次活动，并在她的网站A Single Div上展示了一系列精美的单 div CSS 绘图。

去年，我和其他一些 Web 开发者一起参加了 Divtober 活动，自己也创作了一些单元素 CSS 绘图。因此，我决定将其中一些作品发布到一个类似“A Single Div”的网站。最终成果就是CSSDrawings.com。

页面上没有一张图片。甚至图标都是纯 CSS 的，并且切换开关（也是 CSS 的）控制着动画。

挑战

一个关于 CSS 和 CSS 艺术的网站，完全用 CSS（当然还有 HTML）编写，可能很有挑战性。而且，我是个开发者，不是设计师，这有时会让事情变得有点复杂。（说实话，这个布局笨拙地抄袭了 Lynn 的“A Single Div”。）

但还有其他挑战：如何让像 CSS 艺术这样本质上不可访问的东西变得可访问？ 我之前有一些想法，并付诸实践。结果在 Lighthouse 上获得了满分，在 Wave 上也获得了近乎完美的分数（有一些警告和误报）。

作为可访问性目标的一部分，我禁用了绘图中所有带有动画的动画，并将它们放在切换开关后面，这样用户可以选择是否显示动画，并且需要单独激活它们（这也是一个显着的性能改进。）

有些地方可以改进（比如重复的链接名称，正在改进），但目前我对结果很满意。如果有时间的话，我可能会添加一个部分，并列展示代码和绘图。总的来说，它已经为 Divtober'22 做好了准备。

可能，最大的挑战是回答我在分享与 CSS 艺术相关的内容时总是会出现的问题……它是响应式的吗？（是的，你会问那些在 JPEG/SVG 上分享绘图的人这个问题吗？）你能为它添加动画吗？（是的，但如果它们还没有动画，我想我不会这样做。）为什么是 CSS 而不是 SVG？（因为。）

最喜欢的画作

网页上有超过 90 幅 CSS 插图，所以很难从中挑选出最喜欢的。以下是我在编程过程中最喜欢的五幅插图（排名不分先后）：

订书机

这是用 CSS 和单个 HTML 元素编写的订书机的逼真插图。（还有一个红色版本！）该元素是一个复选框，并且是交互式的：点击它，订书钉架就会滑出或滑入。

音量旋钮

我喜欢它的阴影和逼真的视觉效果。它也很实用，因为它使用了一个元素<input type="range" />作为绘图的基础。此外，背景还带有一些金属质感（但这有点“作弊”，因为那是容器元素，而不是旋钮本身。）

动画骰子

乍一看，这些骰子可能没什么特别之处。它的动画效果甚至很差（Safari 浏览器有点小故障，幸好大多数人不会注意到），而且作为 3D 绘图来说，它极其简单。那么，为什么选择它作为“最爱”呢？因为它是一个单一元素。立方体有 6 个面，但使用单个 HTML 元素，我们只需要 3 个面（元素本身以及::before伪::after元素）。动画可不仅仅是简单的旋转。😉

魔术

让这幅插图适应屏幕比创作它更具挑战性（创作过程也很有趣）。这简直就是一个完整的“魔术”，只用了一个 HTML 元素和 CSS，没有 JavaScript 或其他任何代码。你能在不看代码的情况下猜出它是如何运作的吗？

女人肖像

这是列表中唯一一个没有动画或交互的画作。但我喜欢它。我通常不画女人。每次我尝试，最终都会画出像咕噜一样的东西，但这幅画是个例外（请不要注释掉::after）。它还使用了 CSS 自定义属性，因此更改颜色和添加/删除功能非常容易。

现在轮到你了……

你用过 CSS 画过图吗？而且只用一个 HTML 元素？今年你会参加 Divtober 吗？