今日已更新 81 条资讯 | 累计 37330 条内容
关于我们

Egusi Soup. One Bowl, One Checkbox, Zero JavaScript

Nnamdi Felix Ibe 2026年08月09日 02:18 5 次阅读 来源:Dev.to

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Egusi soup with pounded yam. Jollof gets the headlines, but egusi is the quiet one that actually holds Nigerian homes together. Melon seeds, ugu, palm oil, and a dome of pounded yam you eat with your hands. I already sent this challenge a love letter to jollof for the Perfect Landing prompt. This is the companion piece, and it targets a different audience: not a flat poster, but a photograph with real depth. The entire table sits in a single CSS perspective plane, so the bowl is genuinely a bowl. You look down into it. Demo A morsel of pounded yam is resting on top of the dome. Press "Dip the yam" and watch it lift off, cross the table, drop into the soup and come back stained. No JavaScript anywhere near it. Journey The rule I set myself: zero JavaScript. The one interactive moment runs on a checkbox and a sibling selector. The checkbox stays keyboard focusable, the label carries a visible focus ring, and if you've asked your system for reduced motion, the morsel skips the flight and just shows up stained. The whole scene is sized in container query units, so it scales as one object from a phone to a desktop without a single media query for layout. Some of the tricks I'm proud of: The table is one plane with transform-style: preserve-3d and a rotateX , so everything standing on it uses translateZ to mean "up off the table" The bowl is six rings flaring up the Z axis. The top two are masked hollow, otherwise, they paint straight over the soup, and the whole thing reads as a solid disc. That bug is what taught me the technique The soup sits below the rim on the Z axis, so you see the inner wall and the shadow it throws across the curds The pounded yam is six contours stacked into a dome, each one a little brighter as it climbs toward the light The egusi curds are eleven stacked radial gradients, the palm oil pools at the rim through an inset shadow, and the oil sheen is a blurre

本文内容来源于互联网,版权归原作者所有
查看原文