这是一篇来自 Frontend Challenge - Comfort Food Edition 的 CSS Art 投稿作品。作者以“舒适食物”为主题，选择了一道极具代表性的南印度街头美食——Masala Dosa（马萨拉薄饼），并用纯 HTML 与 CSS 将其完整呈现在一块屏幕上。 之所以选择这道菜，是因为它不仅仅是一顿餐食。金黄酥脆的薄饼，配上香辣的土豆玛萨拉、椰子酸辣酱、番茄酸辣酱，以及一碗冒着热气的桑巴汤，是无数南印度人心中最温暖、最熟悉的味道。作者将这份“熟悉感”作为创作的起点，用代码复刻出一整盘令人身心满足的舒适料理。 整个作品完全使用 CSS 绘制，没有使用任何食物照片或外部图形资源。项目名为 “CSS Masala Dosa — A Plate of Comfort”，并已发布在 CodePen 上供在线体验。 从技术角度看，这件作品的核心在于对 CSS 绘图能力的极致运用。作者首先用多个叠加渐变与圆角形状构建出薄饼的主体结构，依靠色彩与纹理的微妙变化模拟出多拉饼表面酥脆、金黄的质感。 接下来是盘中各个元素的细节呈现： - 玛萨拉薄饼：通过多个渐变、阴影和分层形状搭建出酥脆的饼皮与折叠纹理。 - 土豆玛萨拉：使用多个小 CSS 形状模拟土豆块、洋葱粒和咖喱叶的分布。 - 椰子酸辣酱：用圆形 CSS 图形叠加细密纹理，呈现酱体的颗粒感。 - ️ 番茄酸辣酱：同样是纯 CSS 的圆形元素，利用层叠渐变制造出酱汁的浓稠光泽。 - 桑巴汤：由多个嵌套圆与渐变构成的一只小碗，碗内加入浅色渐变模仿汤液的波动。 - 香蕉叶：用渐变、阴影与 CSS 叶脉线条模拟叶片自然弯曲的质感。 - ♨️ 蒸汽动画：通过 CSS @keyframes 制作向上飘散的蒸汽效果，营造出刚出锅的临场感。 尤为值得一提的是，作者在模拟食物纹理上花了很多心思。通过径向渐变与重复渐变的搭配，让原本平坦的 CSS 图形拥有了类似油炸饼皮的自然起伏与焦斑，巧妙地避开了“像一片塑料”的视觉尴尬。 从一张白纸到一个完整的餐盘，这个项目不仅展示了 CSS 在视觉表现上的潜力，也让人重新审视代码与情感之间的关联。作者用代码为一道普通菜肴注入了温度，让屏幕前的观者也能隐约感受到那股从南印度厨房飘来的香气。
热门跟贴