Developer builds interactive Nigerian egusi soup scene using only CSS and no JavaScript
A frontend developer created a detailed CSS art piece depicting egusi soup with pounded yam as part of the DEV Community Frontend Challenge - Comfort Food Edition. The entire interactive scene, including an animation where a morsel of pounded yam dips into the soup, runs purely on a CSS checkbox and sibling selector with zero JavaScript. The 3D table scene uses CSS perspective, transform-style: preserve-3d, and container query units to scale seamlessly across devices without media queries. Visual details like the bowl's depth, palm oil sheen, egusi curds, and raffia mat were achieved through layered gradients, masking, and box-shadow cloning techniques. The project is MIT licensed and serves as a companion piece to the developer's earlier jollof rice CSS artwork.
This is an AI-generated summary. ShortSingh links to the original source for the complete article.
Discussion (0)
Log in to join the discussion and vote.
Log in