发布于 2026-01-06 0 阅读
0

100 天 CSS 插图(91-100)

100 天 CSS 插图(91-100)

这是“100 天 CSS 插画挑战”的最后一期……至少是最后一期有新作品的——剧透一下:会有新作品——,之后至少还会有一篇回顾和反思的文章。

以下是我过去十天里创作的十幅插图/绘画作品。点击图片即可查看包含代码的完整插图点击此处可查看包含所有作品及一些变体的 CodePen 合集

第 91 天:无分界咖啡杯

一个用 CSS 绘制的略带动画效果的咖啡杯……完全没有用到 HTML?灵感来自@jh3yy#nodivember挑战。最初只是一个单元素的草图,后来我尝试把它从咖啡杯变成咖啡壶。最后,我又回到了咖啡杯,把它变成了一个“无元素”插画……以及整个创作过程的视频

一个空白咖啡杯的卡通形象

第92天:海狸

灵感来自Alyssa van de Bogerd在 Dribbble 上的作品《海狸》。和许多其他插画一样,我把创作过程的延时视频上传到了 YouTube

一只微笑的海狸的卡通形象

第93天:白日梦

这是我从零开始画的插画。我很喜欢画中人物的面部表情和简洁的线条……另外,这是我好久以来第一次没有录像的绘画过程,感觉有点怪怪的。

插图:一位闭着眼睛微笑的女性

第94天:足球场

这张足球场插图看起来可能没什么特别的,但它却有一点很有意思:它也是 nodivember 活动的一部分,而且除了 <code><div> <body></code> 标签之外,没有任何 HTML 标签。我之后会尝试给它加上动画效果,让球上的点/球员移动……还会上传制作过程的视频。

俯视图,足球场示意图。球员和裁判用点表示,左侧球队采用4-4-2阵型,右侧球队采用4-3-3阵型。

第95天:小红帽

这几天比较忙,CSS插图都是赶工完成的,这就是一个例子。不过,我还是按时完成了,并且记录了整个过程

卡通画中,一个女孩穿着红色连衣裙,戴着兜帽,手里拿着一个篮子。

第96天:脸

这是我从零开始创作的另一幅插画。我尝试运用色彩,并将圆形和椭圆形混合在一起,创造出一个连续的元素……我还录制了一段视频,展示了创作过程

双色人脸,头发与背景融为一体

第97天:工作人员

我在Dribbble上看到一些画作运用了这种非常简单的技巧,即细线条和平涂阴影,于是我也想尝试一下类似的技法。这是绘制过程的延时视频

卡通画中,一个男人穿着T恤衫,正在使用笔记本电脑。

第98天:笑点

Punchline是James Tynion IV在蝙蝠侠宇宙中创作的新超级反派……我本来想画《Something Is Killing the Children》里的Erica Slaughter,但事实证明,用HTML和CSS来实现比我想象的要复杂得多……不过正如你在这个视频中看到的,效果还不错

笑点:一个长发披肩、浓妆艳抹的女超级反派。

第99天:男人

一幅简单的男性人物插画。我尝试添加比平时更多的细节,所以绘画时间也稍微长了一些……还有一段绘画过程的视频

一个穿着衬衫的男人的卡通形象

第100天:朋克

……最后一个……又是一幅完全原创的漫画!这个朋克音乐人可能不如我其他的作品那么精致,但我真的很喜欢它。大概是我100幅作品中最喜欢的一幅。还有一段绘制过程的视频

身穿背心、戴着耳钉、留着朋克发型的女子

额外内容:结束!

是的,到此结束!这是“100天CSS插画挑战”的第100插画。为了配合nodivember挑战,我特意创作了这个复古风格的“结束”字样,而且没有使用任何HTML元素:

复古风格的“剧终”字样,类似于华纳兄弟在 60 年代使用的那种。

文章来源:https://dev.to/alvaromontoro/100-days-of-css-illustrations-91-100-2a9d