这是一份面向前端挑战的呈文——舒适食品版,CSS Art.
Inspiration Bánh m'是能够使平凡瞬间感觉完整的食品之一.
出自"花相会"("花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":"花相会":花相会"花相会":"花相会":"花相会":花相会";花相会"花相会":花相会"花相会".
这是实际的,慷慨的,充满了对比,而且常常是最容易回答一个非常熟悉的问题:“我们应该吃什么?” 这种感觉成为了这幅作品的起点.
我不想只画个三明治 我希望这页能感觉像一封写给越南的小情书:一些温暖,熟悉,略微怀旧的东西,甚至在读者注意到每个细节之前,就立即认出来.
中心思想是“每咬一咬的旅程”。
横跨越南南北两侧的一圈 地图是作为深色木炭湖服务板来渲染的,而三明治上方则以敬酒金色,橙色,绿色,奶油,和辣椒红色等颜色坐.
这种对比保持了面包作为协调中心的作用,同时使国家的外形仍然清晰可见。
内容借用了越南街头老海报的心情。
背景采用温暖的羊皮纸屑色素,微弱的网格线条,细小的不完善,有双边框,有角装饰,有约束的海浪标记等,并混合了静脉和紧凑的大写打字.
我希望它能感觉到印刷和处理,而不是完全数字化。
地图后面是一个固定的 被塞克鼓所启发的铜鼓 这并非是确切的历史复制。
取而代之的是它的中央多射线恒星,同心圆雕刻了环,几何节奏,并被烧焦的铜色调色板,作为越南装饰遗产的视觉参考.
更早的版本使用了简单的橙色太阳,但鼓使这个大圆圈在故事中扮演更有意义的角色,同时保持安静,足以支持三明治.
地理是构成的一部分,而不是事后思考。 (原始内容存档于2018-09-25).
Hà Nài and TP.
Hatch Chí Minh作为红色闪烁的标志出现,位置位于地图上的位置附近.
Hoang Sa、Trường Sa和Phú Quàc以小岛形式和明显的标签作为代表。
这些成分不作为关于区域起源的主张提出,而是在bánh m'本身内形成一种视觉口味之旅。
在左下方,页面包含一个可玩的字典风格定义: Bánh m' – 名词越南的脆脆快地回答“我们该吃什么? ” – 装有口味填料、鲜咸菜、新鲜草药和不可避免的碎屑的布袋。
这条线捕捉了我想对整部作品的语气:尊重,亲切,还有一点乐趣.
演示 如果您的读者没有嵌入器, 请在 CodePen 上打开 Bánh M- CSS 的活版相机 。
我用纯HTML和CSS打造了最后的艺术 没有JavaScript,SVG,画布,图像资产,CSS库,依赖性,或外部字体.
保持这种限制使得每个视觉决定更有趣:每个形状必须来自普通浏览器原始.
越南本土是一个基于百分数的多边形,放置在一个响应地图容器内.
稍相抵的复制会创造出阴影,分层的梯度会增加木炭-夹层深度和谷物.
没有多边形支持的浏览器会得到一个更简单的圆形回落 silhouette 而不是一个破碎的成分. bánh mì由嵌入元素和伪元素组装而成.
渐入地壳 和柔软地亮。
圆形边框创造出"相克"(baguette)的一半.
狭长的旋转形状成为地壳分数,胡萝卜和大孔.
重复的射线梯度表明有猪肉和pâté纹理的切片.
二次曲线梯度产生黄瓜分.
小圆形会变成辣椒环,而圆形的叶片组会形成科里德.
连碎屑和蒸汽都是CSS形状.
青铜鼓也只使用CSS.
重复的光圈和圆锥梯度会产生被刻有的环和几何分.
A级