这个作品是参与“Frontend Challenge — Comfort Food Edition（舒适美食版）”的CSS Art投稿。创作者选择了一道极具代表性的南印度舒适美食——马萨拉多萨（Masala Dosa）作为创作主题。 在马萨拉多萨的故乡，一份金黄酥脆的多萨、配上香辣的土豆马萨拉、清新的椰子酸辣酱、浓郁的番茄酸辣酱，以及一碗热腾腾的桑巴汤，早已超越了“一顿饭”的范畴。它承载着许多人对家的记忆，是那种一入口就会让人感到熟悉、温暖和安心的味道。 创作者决定用HTML与CSS完整复刻这一整盘美食，过程中不使用任何食物图片或外部图形资源。所有视觉元素——从多萨的酥脆外皮、土豆块的纹理，到酸辣酱的光泽、桑巴汤的热气——全部由CSS的渐变、阴影、圆角与层叠结构来实现。 这盘纯CSS马萨拉多萨的主要组成包括： 多萨——利用多层渐变与圆角形状构建主体，通过不同色阶与光影变化模拟出薄脆金黄的质感； 土豆马萨拉——用小型CSS形状拼出土豆颗粒、洋葱片和咖喱叶，还原香料的丰富层次； 椰子酸辣酱——圆形CSS造型配合细腻的纹理细节，呈现柔滑的质感； ️ 番茄酸辣酱——另一款纯CSS圆形元素，以层叠渐变表现其明亮的色泽； 桑巴汤——嵌套的圆形与渐变组合成一个小碗，汤面细节勾勒出温润的视觉触感； 芭蕉叶——用渐变与阴影做出叶片的自然弧度，CSS绘制的叶脉进一步增强了真实感； ♨️ 蒸汽——通过CSS @keyframes关键帧动画让缕缕热气缓缓升腾，赋予这道菜刚刚出锅的鲜活气息。 最令人惊艳的部分，是创作者在完全没有图片辅助的情况下，实现了复杂的食物纹理。径向渐变与重复渐变被用于刻画多萨表面细微的焦痕与颗粒感，让它不至于沦为一块呆板的色块，而是带着油脂光泽、边缘微卷、仿佛刚从铁板上滑下来的样子。 整个项目名为“CSS Masala Dosa — A Plate of Comfort”，目前已在CodePen上公开，可以直接在线查看完整作品和源码。创作者坦言，创作过程中最享受的恰恰是对食物纹理的无图探索——用最基础的CSS技法，拼凑出一顿让人看了会饿的南印度风味。
热门跟贴