100天CSS插图

作为一个个人趣味项目，我挑战自己在 100 天内完成 100 幅 CSS 绘图。我发布了一系列文章，共 10 篇，每篇包含 10 张图片。本文包含所有图片，并附上绘制过程的视频链接。

其中一些图像是原创的，另一些则受到不同艺术家的启发或基于不同的艺术家（在这些案例的描述中提供原始链接）......这导致了有趣的设计和风格的组合，而我试图找到自己的设计和风格。

这是我在过去 100 天创作的 100 幅插图/素描。点击图片可查看包含代码的完整插图，点击此处可查看包含所有插图及一些变体的 CodePen 合集。

第一天：鲨鱼

这是我上周做的CSS 游戏的一部分，也是引发整个绘画项目想法的起点。

第二天：人的思考

这幅作品和榜单上的其他作品一样，灵感/基于 Dribbble 上的一幅插图。尤其值得一提的是，这幅作品的灵感来源于Olga Semklo 的《Faces》。

第三天：蜂鸟

另一个来自 Dribbble 的作品。灵感来自 Ivan Bobrov 在 Dribbble 上创作的蜂鸟（这个和这个）。为了挑战一下，我只用了半圆（虽然我稍微拉长了一点，算是作弊了）。

第四天：面部

这部动画片是从零开始创作的，我真的很喜欢它的效果，带着一种居高临下的表情和假笑。

第五天：拿着气球的怪物

又一个从零开始的作品。这个作品是基于我五六年前为女儿创作的一系列动画片。

第六天：《艾斯·文图拉》漫画

又一个从零开始的作品。一开始只是涂鸦，没有明确的目标，后来突然冒出要画一个艾斯·文图拉的漫画，但一直没能找到合适的表达方式。

第七天：极简狗

基于Ahsan Kahn 在 Dribbble 上创作的 Coffee Dog。我加了一些耳朵，但效果不太满意，所以后来把它们藏起来了。

第八天：哈利·波特

我从零开始画了两个版本的漫画。一个是下面这个版本，另一个是哈利瘦了一点的版本，因为我女儿说这个版本看起来不太像哈利·波特。

第九天：红衣主教

基于Jord Riekwel在 Dribbble 上发布的《红雀》。后来我又尝试用不同的颜色做了几个版本，想把它变成一只蓝鸟，但都不如原版酷。

第 10 天：个人资料

我也非常喜欢这个......即使它没有达到它所基于的原版的水平：Rogie 的 Swiss Beatz（比我的更具表现力和更好 1,000 倍）。

第 11 天：编码大师

这幅动画片是从零开始创作的。说来也有点讽刺，背景代码和绘图是一样的，所以角色本身就是代码。它使用了 CSS 变量，因此可以轻松自定义。

第 12 天：爱

我喜欢Dennis Hoogstad的立体主义/极简主义动画。我还做了一个版本的“Love”，悬停时会变成“Amor”（没有动画）。

第 13 天：漫画人物

又一个从零开始创作的漫画。虽然我不太喜欢最终的发型，但我很喜欢。这个漫画人物也可以通过 CSS 变量进行自定义（参见代码第 42 行）。

第14天：漂浮塔

我需要学习很多关于透视和阴影的知识。这座 3D 城堡的有趣之处在于，它是由一个HTML 元素以及 clip-path 和 box-shadows 开发的。

第 15 天：毛茸茸的怪物举着牌子

这是受我自己在 Dribbble 上的设计的启发，它与本次挑战中的另一部动画片属于同一系列（实际上我重复使用了一些部分，并使用 SVG 作为过滤器作弊）。

第16天：腊肠犬

这部动画片的灵感来自于网上看到的这部动画片（我不知道作者是谁：S）......尽管我的版本有点辛普森风格。

第 17 天：西班牙哈恩

这幅插画描绘的是西班牙哈恩的圣凯瑟琳城堡，那是我长大的城市。为了绘制（尤其是树木区域），我使用了clip-path滤镜drop-shadow，因此可能无法在所有浏览器中显示。

第 18 天：惊讶的皮卡丘表情包

这是用 HTML 和 CSS 制作的热门“惊喜皮卡丘”表情包版本。每 7 秒会更换一次引言，其中一些引言可能应该是“不安的汤姆”……表情包使用错误，扣 5 分！

第十九天：长颈鹿

这幅长颈鹿的漫画是根据我大约五年前为我女儿创作的另一幅漫画改编的。

第 20 天：3D 景观

基于Parham Marandi在 Dribbble 上创作的Landscape。它运用了 3D 变换，并具有一定的交互性：你可以在屏幕上移动鼠标来观看景观的旋转。

第21天：天使与恶魔

这些角色的第一个版本是2010年，当时我开始开发一款圣经问答游戏（但最终未能面世）。原版角色的身材更圆润，曲线更明显，而且还有手臂 :P

第 22 天：Pucca

Pucca是VOOZ创造的热门角色。它最初是一个在线电子贺卡服务，但很快扩展到网络动画、游戏、电视节目……我差点就错过了，所以最后还是选择了简单的东西。

第23天：信中的狗

我尝试过画一些类似这只猫头鹰的作品，但失败了。有时候你会花上几天时间画完，并且爱不释手，但有时候你会讨厌它。这幅画就是后者……也许我会改天再画。

第24天：卡通人物

另一个可自定义的卡通（在第 33 行更改 CSS 变量），具有漫画风格。你可以观看这个视频，了解我是如何编写它的。

第25天：Bender Bending Rodríguez

《飞出个未来》是一部（曾经是/现在也是？）精彩的电视剧，它为我们带来了史上最具标志性的动画角色之一：班德！可惜的是，我之前用的drop-shadow一些软件transform，在某些浏览器上看起来很糟糕。

第 26 天：你好...我想...

又一个匆忙完成的动画片...所以它不是那么好，再加上它使用了，drop-shadow所以它不能在所有浏览器中运行。😬😰

第27天：男人的脸

这幅画我也是匆匆忙忙画的，不过整体效果比上一张好多了。眼睛虽然没达到100%的水平，但看起来也还不错。

第28天：植物发芽

一幅矢量卡通画，画中是一个花盆，盆里有一株正在发芽的植物。土壤带有一些纹理，并使用了一些滤镜来增加模糊效果。

第29天：魔法城堡

又一座城堡——我保证，这是暂时最后一座了——。这次的城堡灵感来自Dmitry Stolz在 Dribbble 上创作的迪士尼世界/灰姑娘城堡……而编写这个城堡所花的功夫比我最初预想的要多。

第30天：里奥·梅西

基于Mark Iddon在 Dribble 上创作的里奥·梅西。这幅里奥·梅西庆祝对阵皇马进球的插画仅使用了剪辑路径和背景完成。

第31天：龙雷达

尝试一些看起来更“逼真”的东西。这个龙形雷达（出自《龙珠》）使用了不同的阴影，按钮按下时还会有动画效果。

第32天：Line house

基于Boyko在 Dribbble 上发布的Line 房屋系列。我喜欢原作的简洁优雅。

第33天：梦想

一幅从零开始的漫画，不知道要画到哪里去。随着它逐渐长大，我考虑过加一本书和一头卷发……但它开始变得太复杂了，所以我缩小了尺寸，让头发逐渐融入背景。

第34天：彩虹猫

这幅动画（既催眠、恐怖又神秘）插图基于Ryan Feerer在 Dribbble 上创作的“彩虹猫” 。

第35天：咖啡

只是一杯咖啡，上面画着“咖啡”这个词的字母，咖啡顶部有一个小混合模式。

第36天：大象

使用 SVG（带路径）进行线性绘图比仅使用 CSS 容易 1,000 倍，并且结果总是更平滑，因为连接是完美的（因为没有连接，它都是一条线。）

第37天：巴塞罗斯的公鸡

巴塞罗斯公鸡是葡萄牙的传统象征之一。它源于一个传说，传说一只死去的公鸡奇迹般地救了一个人的命。所有圆点均手工放置在一个方框阴影中。

第38天：勇士

基于Boyko在 Dribbble 上发布的插画作品《Warrier》。我喜欢原作的简洁，这实际上也体现在 HTML 中（只有 6 个元素）的简洁性上。

第39天：Dipper Pines

这是角色 Dipper Pines（出自《怪诞小镇》）的 CSS 改编。总有一天我会做完整版，而不是只做上半身。

第40天：回到学校

又一个从零开始的动画片。这次是为了庆祝孩子们返校……或许我应该做个2020版，里面的孩子也戴口罩 :P

第 41 天：吃豆人模式

这是一个简单的 CSS 图案：深色背景周围环绕白色圆圈。让我们添加一个 box-shadow 和第二个背景图像（带有圆锥渐变和径向渐变），并添加一些运动效果，创建一个类似吃豆人风格的动画……无需使用任何 HTML 标签。点击此处了解如何操作。

第42天：水瓶

一个空水瓶。

第 43 天：脸部/连帽衫

我尝试了一些比以前更复杂的东西，并尝试了阴影。结果并不惊艳，但我很喜欢画它。点击复选框可以添加/移除连帽衫。还可以通过修改 CSS 代码第一行的变量来自定义绘图。

第44天：微醺

根据品酒 - Motionblurstudios在 Dribbble 上得出的结论。

第45天：女人

灵感来自 Aiony Haust 在 Unsplash 上创作的“身穿黑色圆领衫的女人”。这幅漫画仅使用了剪切路径完成。

第 46 天：El Chapulín Colorado

这是Chapulín Colorado的简约版本，Chapulín Colorado 是 70 年代模仿超级英雄节目的深受喜爱的电视角色。

第47天：花盆

今天我参加了一场黑客马拉松，几乎没时间做任何事。我本来想做点简单可爱的，但结果却有点简陋。以后有机会再试试。

第48天：油脂工

油脂仔的卡通画（就像《油脂》中的丹尼·祖克，或者《方兹》<--请让我知道你得到了这些参考资料，否则我会觉得自己老了：P）。

第49天：鲸鱼

我非常喜欢这个卡通的最终效果。它非常简单——只有3种颜色和6个div——但看起来干净又漂亮。

第50天：堂吉诃德

堂吉诃德是 1605 年小说（被认为是第一部现代小说）中的人物：米格尔·德·塞万提斯所著的《曼彻的聪明绅士堂吉诃德》。

第51天：雪人

这是我很久以前为一款游戏绘制的雪人版本，但最终没有出版。

第52天：恶魔

我即将在Codepen上获得 666 名关注者，因此 original-me 决定制作一幅描绘恶魔的漫画。

第53天：小狗

当我从零开始画这幅漫画时，它很快就看起来像刺猬索尼克……所以我稍微修改了一下，把它变成了一只狗。这里有一个视频，教你如何画出来。

第 54 天：穿着 HTML T 恤的人

我提前一天发布了这篇文章，时间很紧。不过结果还不错。我还录了这个过程，并分享到了YouTube上。

第55天：锦鲤

这幅漫画是根据Urban Threads Pinterest 页面上的这幅画改编的。我非常喜欢这幅画的简洁风格，也喜欢这些彩色的鱼。

第56天：彼得·格里芬

电视剧《恶搞之家》中的角色彼得·格里芬 (Peter Griffin) 的简约版本。

第57天：自行车

基于Andrew Pons在 Dribble 上为Big Vision创作的“ M is for Motion ” 。由于此插画使用了圆锥渐变，因此在 Firefox 上显示效果可能有所不同。

第 58 天：CSS Mafalda

基诺是西班牙语领域最前卫、最鼓舞人心的漫画家之一。他于2020年9月30日去世。玛法尔达是他最受喜爱的角色之一。

第59天：超人/克拉克·肯特

将鼠标放在超人身上，图画就会改变颜色和形状，最终变成克拉克·肯特。我录了制作过程，可以在 YouTube 上观看。

第60天：怀念夏天

我一直想画一幅风景画。这个有点简单（只有6div秒），里面有一个舒缓的波浪动画。

第61天：不以为然

这幅漫画是从零开始画的，画的是一个面无表情的人。你可以观看这段视频，看看它是如何完成的。

第62天：举着牌子的年轻女子

又是一幅从零开始的漫画。这次画的是一位年轻女子，手举一块写着法国1968年五月风暴口号的牌子。

第63天：V领男士

这又是一部从零开始创作的动画片……风格和前两部不同。YouTube 上有一个关于这部动画片制作过程的视频。

第 64 天：投票！

这是用 HTML 和 CSS 制作的一个简单的 logo/banner 的尝试。距离美国总统大选还有 27 天，主要候选人是特朗普（以发型闻名）和拜登（戴着飞行员墨镜）。

第65天：老鼠

灵感来自Cris在 Dribbble 上的作品“第六天 - 啮齿动物” （这个作品的纹理和形状更出色）。此外，还有一个视频演示了制作过程。

第66天：拿着气球的女孩

灵感来自才华横溢的Ana María的插画。与之前的漫画一样，原作比我翻译成 HTML+CSS 的版本好上千倍。附上绘制过程视频。

第 67 天：乘船

这个很有意思。在 Firefox 上看起来没问题，但在 Chrome 上背景有时会闪烁（为什么？），在 Safari 上，盒子阴影和船形的配合有点奇怪……以后我得更小心了 :S

第68天：小死亡

一幅从零开始创作的万圣节前夕动画。我非常喜欢这个作品的效果。Chrome 浏览器的盒状阴影、圆角边框和相对单位似乎存在问题，影响了镰刀的绘制（甚至显示！）。

第69天：弗兰肯斯坦的怪物

又一幅从零开始创作的万圣节主题插画。画到一半的时候，我有点想直接画绿巨人，但最终还是决定画了。这里有一个视频，教你如何完成。

第70天：Ellipse的贵宾犬

这只狗只用椭圆和半圆画的。画起来很有趣，虽然结果不太令人印象深刻……它看起来更像一只山羊，而不是一只贵宾犬 :S

第71天：德古拉

这个动画版的德古拉会通过网格元素（无需 JavaScript）跟随鼠标在屏幕上移动。您可以点击此处观看视频，了解它的开发过程。

第 72 天：剪影

这个轮廓很有趣，因为它只用了圆形来画。观看视频，了解它的绘制过程（包含两种变体）。

第73天：侏儒

一个悲伤的侏儒。

第74天：书呆子男孩

我一开始画的是男孩的卡通形象，但开始画身体的时候，我决定加上“投票给佩德罗”的字样……但这不仅仅是拿破仑大佬的漫画，而是一个装扮成拿破仑大佬的男孩。访问我的YouTube频道，观看编码过程的视频。

第75天：笑话

一个（非原创的）糟糕的老爸笑话，玩弄了“soy”这个词在西班牙语和英语中的含义。我最初做过一个不同的版本，但我更喜欢这个……以及一个演示它如何编码的视频。

第76天：好鸡蛋

改编自乔里·约翰和皮特·奥斯瓦尔德笔下的“好蛋”角色。这是我女儿目前最喜欢的书之一。

第77天：足球

一部从零开始创作的新动画片。我喜欢里面那个孩子奔跑的动感……这里有一段视频，展示了它的制作过程。

第78天：卡通

这部动画片有点像《狂欢三宝》（但其实没那么像）。今天的动画片时间不够了，而且很累，效果显然不太好……还是那句话，明天会更好。

第 79 天：令人毛骨悚然

这幅单元素插图的灵感来自Dribbble 上Jack Moran 的作品“ Spooky ” 。

第80天：修女

又是一幅从零开始的漫画。今天完全不知道该画什么，只是看了一集LOL漫画之后，突然想画个大眼睛的……还有画的过程记录。

第81天：雪中咖啡

受到 Dribbble 上Hadi Kurnia的“冬季服装 - 矢量插图”的启发...我喜欢做这样的事情的想法，然后从零开始构建它，灵感来自该插图...以及它是如何完成的视频。

第82天：小怪物

一幅全新的万圣节漫画，从零开始创作。以下是绘制过程的视频。

第83天：男人的脸

又一张从头开始画的图。插画就是这样画的。

第84天：女人和树叶

这幅插画的灵感来源于Bujar Ljubovci在 Dribbble 上发布的“未使用”提案，它只有 3 个 div（其实可以很容易地精简到 2 个）。我上传了一个视频到 YouTube，展示了它的制作过程。

第 85 天：卡通人物（v3）

又一个从零开始的卡通人物。这个人物的风格让我隐约想起了老版的阿奇……虽然不是故意的……还有另一张带有“幕后”视频的插图。

第 86 天：人员编码（v2）

最初，我想根据 Pacifica Northwest 画一幅画，但后来我意识到时间不够了，就匆忙地画成一个边缘“有点”粗糙的东西……还有一个视频展示了它的制作过程

第87天：蝴蝶

这幅插图最初是Youtube 上的一条评论，但我必须说我真的很喜欢画这只蝴蝶……
并且我还制作了另一个关于如何对它进行编码的视频。

第 88 天：CSS Witch

现在是万圣节之夜，所以我决定再做一部万圣节风格的动画片：一个邪恶的女巫。这部动画片制作时间稍长，所以我有两个视频版本：一个长版，一个短版。

第 89 天：La Muerte

在完成了一些万圣节插画之后，我也想画一幅亡灵节的插画。这幅亡灵节插画的灵感来源于电影《生命之书》。和其他插画一样，这里有一个视频来演示它的制作过程。

第90天：戴帽子的兔子

我必须承认，今天的动画/绘画有点简单，但今天（可能明天也一样）我时间不多，所以会比较简单。不过，这里有一个视频，可以展示制作过程。

第91天：无潜水余烬咖啡杯

用 CSS 绘制一个略带动画效果的咖啡杯……而且没有使用 HTML？灵感来自@jh3yy的#nodivember挑战。一开始是单元素绘制，然后我尝试将它从咖啡杯变成一个咖啡杯。最后，我又回到咖啡杯，把它变成了一幅“无元素”的插画……以及整个过程的视频。

第92天：海狸

灵感来自Alyssa van de Bogerd在 Dribbble 上创作的Beaver。和许多其他插画一样，我把制作过程的延时摄影上传到了 Youtube 上。

第93天：做白日梦

从零开始画的插画。很喜欢它的表情和简洁的画风……还有，好久没录图了，感觉有点奇怪。

第94天：足球场

这张足球场插画可能看起来没什么特别，但它有一个有趣的地方：它也是 nodivember 的一部分，而且没有任何 HTML 标签（除了<body>）。我稍后会尝试添加动画，让圆点/球员四处移动……以及制作过程的视频。

第95天：小红帽

这几天有点“忙”，CSS 插图也是匆匆忙忙完成的，比如这个。不过，我还是按时完成了，并记录了整个过程。

第 96 天：脸

又一个从零开始的插画。尝试着玩转色彩，混合圆形/椭圆形来打造一个连续的元素……附上一个制作过程的视频。

第 97 天：工作的人

我在 Dribble 上看到了一些用这种非常简单的技巧（细线和平面阴影）画的画，所以想尝试一下类似的。这是绘制过程的延时摄影。

第 98 天：妙语

Punchline 是詹姆斯·泰尼恩四世在蝙蝠侠宇宙中创造的新超级反派......我想画出《Something Is Killing the Children》中的艾丽卡·斯劳特 (Erica Slaughter)，但事实证明，在 HTML 和 CSS 方面这比我想象的要复杂得多。

第99天：男人

一幅简单的男士插画。我尝试添加比平时更多的细节，这也导致绘制时间更长……以下是一段制作过程的视频。

第100天：朋克

……最后一张……又是一张从零开始的漫画！这个朋克音乐人可能不像我画的其他作品那么华丽，但我真的很喜欢。大概是这100幅作品里我最喜欢的之一了。还有一段视频，教你如何画出来。

...还有一些额外内容

字母猫头鹰

昨天睡觉前，我有点儿犯傻，用 HTML 和 CSS 画了一只猫头鹰，以“owl”这个词为原型。你可以在这个视频里看到整个过程：

双向图

尝试用我的名字（Alvaro）制作一个对称图形。虽然边缘粗糙，但还是可行的：如果你将图像旋转 180 度，它仍然会显示单词 Alvaro：

完结！

是的，结束了！100天CSS插画挑战结束了……不过以后还会有更多CSS插画作品。为了庆祝挑战结束，我制作了这条复古风格的“结束”信息，没有使用任何HTML元素（献给十一月十一号）：