我的 2022 年十月节绘画作品

十月已过，divtober 也随之结束。Divtober 是由Lynn Fisher组织的一项编程挑战，每年十月举行。挑战要求参赛者使用 CSS 和单个 HTML 元素绘制一些与每日关键词相关的内容。本文收集了我为 2022 年 divtober 创作的绘画作品。

这些图画大部分都在cssdrawings.com上，但有些不太实用，所以没有上传到网站上，不过我把它们添加到了这篇文章里。希望你喜欢它们。如果你完成了一些挑战，请在评论区分享链接。我很想看看 :)

图纸

1. 徽章

这幅画是童子军功章（如果你知道是哪一个，可以加分）。

2.干燥

一把能挡雨的伞。尝试一种“极简主义”的东西。

3. 零食

一袋薯片。

4.安静

我想找点安静的，想在太空里做点什么（还有什么比这更安静的呢？），所以我画了这张外太空的日出。不过，可能有点跑题了。

5. 邮票

盖有邮戳的邮票。

6. 肉质

根据窗口大小，汉堡的肉质会变得更多或更少（打开演示并调整窗口大小）：

7. 奇迹

神奇女侠卡哇伊主题的画。我不太喜欢画里的对称。

8.闹鬼

鬼屋（显而易见的选择。）

9.崛起

亡灵复活就在这里！

10.游戏

我为这个词创作了两个演示（我在 Twitch 上直播了整个过程，但质量并不好）。一个是 Game Boy 的绘图（如下图），另一个是一个单元素迷宫游戏。

11.汉堡

我已经做过一个汉堡了。我又完成了一个新的，但这次它跑起来了，因为它是“快餐”。

12. 阴影

这幅“SHADOW”字样的图画投射出一道阴影。这个演示没有任何字母；所有字母都是背景线条——这是该过程的延时拍摄。

13.永远

基于西西弗斯的神话，他受到惩罚，必须永远扛着一块巨石上山。

14. 飞溅

这幅图的动画效果非常丰富：一只鸟在地板上拉屎，溅起水花（有点滑稽）。我在 Twitch 上实时编码了它。这里有一个演示如何创建水花效果的视频和一篇博客文章。

15.擦除

用铅笔擦掉“powerless”一词中的“less”部分。

16.催眠

动画钟摆。它是在摆动，还是在旋转？别被催眠了！

17.条纹

这幅画可能有点牵强，但正如他们所说，IFKYK。这是白色条纹乐队的前三张专辑封面（去掉了人物）。

18.双关语

我直播了这部动画片。很有趣，而且直播效果比上次更好（但我不得不把画质降到很低，所以不值得分享到网上）。

19.神话

这幅美杜莎的画也只有一个 HTML 元素。这里有一个编码过程的视频。

20.十

足球明星莱昂内尔·梅西在巴黎圣日耳曼身披30号球衣，但在巴塞罗那足球俱乐部和阿根廷国家队，他最长的时间里都身披10号球衣。这幅画是梅西的“摇头娃娃”卡通画。

21. 有价值的

一个宝箱。

22. 柔软

我不太喜欢这杯“软饮料”。比例不对，看起来也不怎么样。不过，这杯酒可不是每天都能喝的（虽然这已经是连续两天表现不佳了）。

23.流行音乐

我还有其他可以与“流行”搭配的单元素绘画（例如前一天的汽水），但我喜欢这种流行艺术风格的猫头鹰。

24.立方

这个效果让我头晕。我的大脑在缺少外角的立方体和内角的立方体之间来回切换。这可不是我最好的演示。

25. 夜光

我在 Twitch 上直播了这幅画。但还是遇到了很多技术难题，所以没上传视频，留到以后再说。

26.复古

这部 VHS 动画片很适合“流行”日。

27.谷物

对这幅画持保留态度 :-P

28.怪物

无脸男是电影《千与千寻》中的幽灵/怪物。

29.免费

一个愚蠢的笑话变成了单元素 CSS 艺术。我应该加个蛋糕的。

30. 宠儿

10月30日是星期天。我没怎么画画，因为一整天都和家人在户外活动。我不会为了画CSS而改变这一天。

31.酿造

我本来想把汽水罐重新利用起来做个啤酒罐，结果最后我选择了我真正的能量来源：咖啡！这个法压壶是速成的，只用了一个元素，没有用任何伪元素。以后我可能会花点时间，让它更逼真一些。

一些额外内容

31张图不够。10月份我又完成了几张单元素CSS图。有些和divtober挑战赛有关，有些是我休息一下，做些别的事情。

夜景

我画了这张图的单元素版本和零元素版本。在方形/竖屏模式下看起来更好（点击此链接查看）。

游戏角色

这是第24个“立方体”的替代品。我也做过一个三维魔方，但它是之前演示的翻版。

比尔·塞弗

电视剧《怪诞小镇》里的恶魔是28号怪物的替代品。我甚至录了下来，分享在YouTube上。

结论

我最喜欢的这一期的画是《无脸男》（尽管它对于当天的词语来说有点牵强，而且栏杆与画的其他部分不匹配）。

我很喜欢玩模糊对比效果。我以前几乎没用过，但以前见过Temani Afif和Ana Tudor等人熟练运用。最后，我用得有点多了（怎么办？效果真棒！）

现在 divtober 已经结束，它的一个最显著的好处就开始显现了（至少对我来说）：如果我每天能抽出 30-60 分钟来绘制 CSS，我就可以继续抽出 30-60 分钟来做其他事情，比如阅读、学习，或者完成那个我总是以“没时间”为借口的讨厌的课程。

当然，我不需要“divtober”来提醒自己：时间和机会总是有的。但它们常常被日常活动和优先事项淹没；久而久之，我就会忘记它们。有这个提醒真好……而且CSS艺术图也很有帮助。

如果你完成了 divtober 挑战（全部或部分），我希望收到你的反馈并欣赏你的画作。请在评论区分享或在 Twitter 上与我联系。这总是令人愉快且富有洞察力的。

如果您正在寻找更多 divtober 演示，请在 Twitter 上查看 #divtober 标签，并关注以下一些出色的人：

鏂囩珷鏉ユ簮锛�https://dev.to/alvaromontoro/my-divtober-2022-drawings-18dj