The latest articles on DEV Community by Muluken (@muluken_). https://dev.to/muluken_ https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4059970%2F49b54720-3cd5-40ef-84dd-f6a361cfa23f.png https://dev.to/muluken_ en Muluken Fri, 07 Aug 2026 12:16:15 +0000 https://dev.to/muluken_/css-art-comfort-food-a-hot-milk-design-5em6 https://dev.to/muluken_/css-art-comfort-food-a-hot-milk-design-5em6 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2026-07-29">Frontend Challenge - Comfort Food Edition, CSS Art</a>.</em></p> <h2> Inspiration </h2> <p>A cup of hot milk and a slice of cake represent simple moments at home — relaxing after a long day, sharing memories with family, and enjoying small things that make us feel safe and connected. I wanted to capture that cozy feeling using only HTML and CSS</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/editor/mule_dev/embed/019fdc1f-232f-766c-bc6c-52139e766156?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>My journey started with the idea of creating a simple scene that represents the warmth of home using only HTML and CSS. I began by building the basic structure of the cup and cake with HTML div elements, then gradually shaped each part using CSS properties like border-radius, gradients, shadows, and positioning.</p> <p>Creating realistic details such as the glass cup, milk surface, steam, and cake layers was a process of experimentation and refinement. I adjusted shapes, colors, and shadows repeatedly until the illustration felt more natural and cozy.</p> <p>This project helped me explore how powerful CSS can be for creating visual art without images or external tools. It reminded me that small details and creativity can transform simple code into something that feels familiar and meaningful.</p> frontendchallenge devchallenge css