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 标签。我之后会尝试给它加上动画效果,让球上的点/球员移动……还会上传制作过程的视频。
第95天:小红帽
这几天比较忙,CSS插图都是赶工完成的,这就是一个例子。不过,我还是按时完成了,并且记录了整个过程。
第96天:脸
这是我从零开始创作的另一幅插画。我尝试运用色彩,并将圆形和椭圆形混合在一起,创造出一个连续的元素……我还录制了一段视频,展示了创作过程。
第97天:工作人员
我在Dribbble上看到一些画作运用了这种非常简单的技巧,即细线条和平涂阴影,于是我也想尝试一下类似的技法。这是绘制过程的延时视频。
第98天:笑点
Punchline是James Tynion IV在蝙蝠侠宇宙中创作的新超级反派……我本来想画《Something Is Killing the Children》里的Erica Slaughter,但事实证明,用HTML和CSS来实现比我想象的要复杂得多……不过正如你在这个视频中看到的,效果还不错。
第99天:男人
一幅简单的男性人物插画。我尝试添加比平时更多的细节,所以绘画时间也稍微长了一些……还有一段绘画过程的视频。
第100天:朋克
……最后一个……又是一幅完全原创的漫画!这个朋克音乐人可能不如我其他的作品那么精致,但我真的很喜欢它。大概是我100幅作品中最喜欢的一幅。还有一段绘制过程的视频。
额外内容:结束!
是的,到此结束!这是“100天CSS插画挑战”的第100幅插画。为了配合nodivember挑战,我特意创作了这个复古风格的“结束”字样,而且没有使用任何HTML元素:
文章来源:https://dev.to/alvaromontoro/100-days-of-css-illustrations-91-100-2a9d










