我的Divtober 2022图纸
#css #网络开发人员 #showdev #艺术

十月不见了。随之而来的是,Divtober也结束了。 Divtober是Lynn Fisher组织的一项编码挑战,发生在10月。它包括使用单个HTML元素使用CSS绘制某些内容(related to the word of the day)。本文是我为2022版所做的图纸集合。

大多数这些图纸都在cssdrawings.com 上,但是有些图纸不实用,因此我不在网站上包括它们,但我在本文中添加了它们。我希望你喜欢他们。 如果您完成了一些挑战,请在评论中分享链接。我想看他们:)

图纸

1.徽章

此图是童子军优异徽章(如果您知道是哪个,则要点)。

2.干燥

雨伞可以从雨中干燥。尝试“极简主义”的尝试。

3.小吃

一袋薯条。

4.安静

考虑一些安静的事情,我想在太空中做某事(什么可以安静?),所以我从外太空画了这一日出。不过,也许有点偏离。

5.邮票

邮戳。

6.肉

根据窗户大小(open the demo and resize the window),此汉堡将变得或多或少变成肉。

7.想知道

神奇女侠主题绘画。我不是图片中对称性的忠实拥护者。

8.闹鬼

鬼屋(明显的选择。)

9.崛起

死者的崛起在这里!

10.游戏

我为这个词创建了两个演示(我在Twitch上流了该过程,但质量并不出色)。一个是游戏男孩的图纸(下图),另一个是single-element maze game

11.汉堡

我已经做了一个汉堡包。我完成了一个新的,但是这次是因为它是“快餐”。

12.阴影

“阴影”一词的图绘制了阴影。该演示没有任何字母。所有这些都是背景行-A Time-lapse of the process

13.永远

基于西西弗斯的神话,他不得不将巨石抬起巨石作为惩罚。

14.飞溅

这个人很动画:地板上的鸟大便,散发出(愚蠢的事情)。我在抽搐中现场编码。这是video showing how to create a splash effectblog article

15.擦除

铅笔在“无能为力”一词中删除“少”部分。

16.催眠

动画摆。它是摇摆还是摆动和旋转?不要催眠!

17.条纹

此图纸可能有点牵强,但是正如他们所说的,Ifkyk。这是白色条纹的前三张专辑封面(删除人民之后)

18.双关

我现场编码了这部动画片。这很有趣,流媒体比上一次更好(但是我必须降低质量,以至于不值得在线分享。)

19.神话

此Medusa的图纸也只有一个HTML元素。有一个video of the coding process

20.十

足球明星莱昂内尔·梅西(Lionel Messi)在PSG上排名第30,但在最长的时间里,他在巴塞罗那足球俱乐部和阿根廷国家队中戴了10号。此图是Messi的“摇头”卡通。

21.有价值

宝藏。

22.软

我不太喜欢这种“软饮料”。比例已经关闭,而且看起来不太好。但是并非所有的日子都会好起来(尽管这是连续两个薄弱的日子。)

23.流行

我还有其他单元素图纸可以随附“流行音乐”(例如前一天的流行汽水),但我喜欢这种流行风格的猫头鹰。

24.立方体

这种效果使我头晕。我的大脑在多个立方体之间变化,缺少外部碎片和内角的立方体。不是我最好的演示。

25.发光

我在Twitch上现场编码了这张图。但是我仍然遇到许多技术困难,所以我没有上传视频以供以后进行。

26.复古

这款VHS卡通本来可以在“流行”日工作。

27.谷物

用一粒盐绘制这张图:p

28.怪物

No-Face是电影中的精神/怪物。

29.免费

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

30.挚爱

10月30日是星期日。我没有太多时间来画画,因为我整天与家人一起做户外活动。我不会为CSS绘图更改它。

31.酿造

我正在考虑重复使用苏打水来制作啤酒罐,但是,我选择了真正的能源:咖啡!这款法国媒体是一张快速图纸,只使用一个没有伪造的元素。我可能会花一些时间,使其更现实。

一些额外的东西

三十一个图纸还不够。我在10月完成了更多单元素CSS图。有些与Divtober挑战有关,有些是我休息一下并做不同的事情。

夜景

我做了单元素和此图的零元素版本。在平方/肖像模式(check it on this link)中看起来更好

游戏角色

这是#24:立方体的替代方法。我也做了three-dimensional Rubik's cube,但这是对以前的演示的翻拍。

Bill Cipher

电视节目《重力瀑布》中的恶魔是#28怪物的替代方法。 I even recorded the process and shared it on Youtube

结论

我在此版本中最喜欢的绘画是不面对的(即使这是当天的单词有点伸展,并且栏杆不符合其余图纸)。

我喜欢玩模糊的对比效果。我以前几乎没有使用过它,但是看过像Temani AfifAna Tudor这样的人过去掌握了它。最后,我使用了太多(我该怎么办?效果很好!)

现在,Divtober完成的是它最重要的好处之一开始(至少对我来说):如果我每天能够每天30分钟60分钟来进行CSS绘画,我可以继续花30分钟的时间去做其他事情,例如阅读,学习或完成那个讨厌的课程,我总是说“不时间”作为借口。

当然,我不需要Divtober:时间和机会始终存在。但是他们经常被埋葬在日常活动和优先事项中。随着时间的流逝,我倾向于忘记他们。很高兴有这个提醒,并且CSS艺术也有所帮助。


如果您完成了Divtober挑战赛(完全或部分),我想听听您的消息并查看您的图纸。请在评论或reach out on Twitter中分享它们。总是很好,很有见地。

,如果您正在寻找更多Divtober演示,check the #divtober hashtag on Twitter并关注其中一些了不起的人: