The latest articles on DEV Community by Natália F. Dev (@nataliafdev). https://dev.to/nataliafdev 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%2F774552%2Fbaf72c97-d83d-4c85-98a0-3753401fd66b.jpg https://dev.to/nataliafdev en Natália F. Dev Mon, 16 Sep 2024 02:15:43 +0000 https://dev.to/nataliafdev/css-art-space-ufo-animation-94h https://dev.to/nataliafdev/css-art-space-ufo-animation-94h <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2024-09-04">Frontend Challenge v24.09.04</a>, CSS Art: Space.</em></p> <h2> Inspiration </h2> <p>Just sharing a simple CSS art, inspired by an old code from a couple years ago.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/nataliafdev/embed/KKjLoOY?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>The most challenging part of the code was animating the offset-path property, but with some research, I found a way to do this with the help of Figma. For those who want to find out more about offset-path and CSS Shapes, <a href="https://fullystacked.net/offset-path/" rel="noopener noreferrer">here is the content that helped me</a>.</p> frontendchallenge devchallenge css cssart Natália F. Dev Sun, 31 Mar 2024 04:49:12 +0000 https://dev.to/nataliafdev/css-art-slice-of-pizza-as-favorite-snack-4hn0 https://dev.to/nataliafdev/css-art-slice-of-pizza-as-favorite-snack-4hn0 <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>Pizza has been one of my favorite snacks since childhood, and it was one of the first things I thought of when I read the challenge title.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/nataliafdev/embed/poBWMbY?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <h2> Journey </h2> <p>Drawing with code is one of my hobbies, but it had been a while since I played around with CSS. Discovering about the challenge made me eager to start practicing again. The initial attempts at the drawing were not great, but with a little patience and persistence, the appearance improved somewhat. It's not one of my prettiest projects, but I'm happy with the result.</p> <p>In the code, the most challenging part was rendering the melted cheese (not supported in all browsers), but thanks to a <a href="https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/" rel="noopener noreferrer">post on the CSS Tricks website</a>, I was able to solve the problem!</p> <p>The rest of the elements are a combination of shadows and border manipulations, nothing too different from what most people do when practicing art with CSS.</p> <p>I hope to improve the code in the future and add some animations or more details!</p> frontendchallenge devchallenge css