This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
For me, comfort food is closely tied to a Sout...
For further actions, you may consider blocking this person and/or reporting abuse
Good CSS/HTML coverage. The landscape here moves quickly β worth noting that container queries and :has() selector support have reached baseline, which can simplify many of the responsive patterns we previously needed JS for.
Thanks for highlighting that!
Modern features like container queries and :has() have been huge game-changers for responsive design. Itβs definitely time to revisit some of those older patterns and streamline the CSS.
Exactly,
:has()alone eliminates so many JavaScript workarounds we used to rely on for parent styling. When you refactor those older media query patterns to use container queries, do you find it makes the components significantly more portable across different layouts?Good question! In my experience, absolutely.
Container queries decouple the component from the viewport entirely, making it much easier to drop into different layouts, like sidebars, main content areas, or grid cards, without needing to write context-specific overrides. It definitely feels like the true realization of modular design.
Decoupling from the viewport is exactly what makes container queries so powerful for true modular design. When components adapt to their immediate context rather than the browser window, dropping them into a sidebar or a dense grid card just works out of the box. Have you experimented with combining container queries and the :has() selector to create completely self-contained, JavaScript-free responsive components yet?
Container queries are especially perfect for a layout like this where the breakfast items need to scale based on their own plate size rather than the overall viewport. I am curious if you plan to refactor the existing markup to use :has() for styling specific dishes based on their parent container state.
Beautiful. We also have this tradition in the Philippines where we use huge banana leaves as plates. Rice and food are served there. This is common during fiestas or just simple celebration events. Didn't know we have a similar culture with food. Great work @sushyam_nagallapati!
Thatβs awesome! @codingwithjiro Iβve seen Boodle Fights in Filipino culture before and always loved how similar that tradition is, eating off a banana leaf really brings a special kind of warmth to sharing a meal. Really cool to connect over that shared piece of culture! π
Yeah that was the term, boodle fights hahahaha. I was trying to remember it while typing my comment earlier. Thanks for mentioning the exact term π
π No mention. Glad that brought back the beautiful memories.
As a fellow south indian , this is beautiful and good . And i am idli sambar guy π
Same here! Idli sambar is top tier comfort food. Appreciate the love, man! ππΌ
A North Indian girl also loves idli sambar, bro! π
Haha, awesome! Good food truly connects everyone. Thanks for stopping by! π
haha ππ
Capturing the subtle porous texture of the idlis with radial gradients and getting the stainless steel reflections right without overshooting into harsh chrome is incredible work!
Metallic surfaces are notoriously difficult to render in pure CSS without relying on SVGs or canvas, so layering ambient scene reflections with inset shadows was a brilliant choice. The lighting and warmth in this piece really pull off the "still life" feel. Fantastic submission!
Thank you so much!
Getting the stainless steel and the porous texture right took a lot of trial and error with gradients and shadows, so I really appreciate you noticing those specific details. Glad the warmth of the scene came through!
This is beautiful, the pure CSS constraint makes it even more
impressive, especially the steel bowls and tumbler. That's exactly
the material that's hardest to fake without SVG or canvas, since
metal highlights either look flat or too "chrome" like you mentioned.
The detail about removing things to improve the composition is such
an underrated lesson in CSS art (and design in general), more layers
don't always mean more realism, sometimes it's just more noise.
Also really appreciate the accessibility thought here, the
prefers-reduced-motion handling and the descriptive figure label
aren't things most CSS art submissions bother with.
This does what good comfort food art should do, it made me think of
home too, and I'm not even South Indian. Beautifully done.
Thank you so much for the thoughtful feedback!
Getting the metallic highlights right took a lot of trial and error, so Iβm glad that detail resonated with you. I really appreciate you noting the accessibility side of things too. It's easy to overlook when building pure CSS art, but it makes a big difference. Glad the piece connected with you!
πππ
Thank you
nice)
Thank youπ