The latest articles on DEV Community by divya (@kejriwaldivya). https://dev.to/kejriwaldivya https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1390725%2F9ffa3e6f-19c3-4052-a874-465922241b61.png https://dev.to/kejriwaldivya en divya Thu, 28 Mar 2024 21:14:24 +0000 https://dev.to/kejriwaldivya/css-artwatermelon-jo9 https://dev.to/kejriwaldivya/css-artwatermelon-jo9 <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>I had to learn CSS for my job as a frontend developer but started liking it. I love being artistic with it but I am still at my beginners state. </p> <h2> Demo </h2> <p><a href="https://codepen.io/kejriwaldivya/pen/mdgBbNV">https://codepen.io/kejriwaldivya/pen/mdgBbNV</a></p> <p><a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy640h74qph9fekh8o8lf.png" class="article-body-image-wrapper"><img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy640h74qph9fekh8o8lf.png" alt="Image description" width="635" height="411"></a></p> <h2> Journey </h2> <p>I have been obsessed with watermelon these days, thats how I tried drawing it.I started off thinking its easy but I wont deny, I struggled a bit. I have been practicing border-radius recently, so it helped me alot to get through this challenge.Although I am still figuring out how to draw the outer watermelon shades(dark green section and light green section)<br> Some of the properties widly used:</p> <p><code>border-radius</code>:was very helpful making the shapes<br> <code>box-shadow</code>,<code>radial-gradient</code>: to give the shadow effect</p> frontendchallenge devchallenge css cssart