Developer Builds Fully Interactive CSS Thali Inspired by Maharashtrian Home Cooking
A developer has created 'थाळी' (Thali), an interactive digital thali built almost entirely in CSS, as a submission for the Frontend Challenge - Comfort Food Edition. Inspired by traditional Maharashtrian meals, the project recreates a full steel-plate spread — including rice, vaatis, amti, lonche, and a lassi tumbler — using only gradients, box-shadows, and clip-paths, with no images. Users can hover over each dish to read a short description and drag items to swap their positions on the plate. A minimal amount of JavaScript was used solely to track drag coordinates and swap positions, while all visual rendering remains CSS-driven. One notable debugging challenge involved an invisible decorative pseudo-element silently blocking all mouse interactions, which was resolved by applying pointer-events: none to the offending layer.
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