A pure HTML and CSS comfort-food scene inspired by rasam rice on a rainy evening.
What I Built
This is my submission for the DEV Frontend Challenge: Comfort Food Edition,
CSS Art prompt.
I built Monsoon Rasam Window, a pure HTML and CSS illustration of a warm
bowl of rasam rice on a rainy evening. The scene has the pieces that make that
meal feel like home to me: pepper steam, curry leaves, tomato rasam, rice
grains, papad, pickle, a brass lamp, a banana leaf, and rain sliding down the
window.
I wanted the art to feel like the exact minute when the weather is loud outside
but the food in front of you is louder in a quieter way. Rasam rice is simple,
but the smell of pepper, tamarind, mustard seeds, curry leaves, and ghee can
change the whole room. This CSS scene is my attempt to draw that feeling.
Demo
Source code: GitHub repository
Screenshots
Desktop:
Mobile:
CSS Art Details
The main artwork is drawn with CSS:
- bowl, rim, rasam surface, rice grains, tomatoes, pepper, and curry leaves
- banana leaf, papad, pickle cup, spoon, and brass lamp
- rainy window with moon glow, skyline silhouettes, glass reflections, falling rain, and sliding droplets
- table details including a faint kolam pattern, scattered pepper, and curry sprig
- CSS-only steam, rasam shimmer, rain, droplet, and flame animations
- depth through radial gradients, inset shadows, layered positioning, and blur
I avoided SVG, canvas, and bitmap artwork for the illustration itself. The
screenshots are only for the post preview.
Accessibility Notes
Even though this is a visual CSS Art submission, I still wanted it to be usable
and understandable:
- the artwork region has
role="img"and descriptive text for screen readers - there is a skip link and visible focus state
- text contrast was chosen for readability
- animation respects
prefers-reduced-motion - the page is responsive and keeps the artwork visible on mobile
Built With
- HTML
- CSS
The source is MIT licensed.
Top comments (0)