The latest articles on DEV Community by RJJ (@jeffersonrj14). https://dev.to/jeffersonrj14 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%2F1123861%2F7262d696-7d36-460e-959f-a4fbacb137c4.png https://dev.to/jeffersonrj14 en RJJ Wed, 27 Mar 2024 09:33:58 +0000 https://dev.to/jeffersonrj14/css-art-challenge-cookie-58fk https://dev.to/jeffersonrj14/css-art-challenge-cookie-58fk <p><em>This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.</em></p> <h2> Inspiration </h2> <p>Cookie Crumb, I ended up breaking my cookie, and I took that as inspiration to create these cookies. Even though they're not perfect, I did try my best.</p> <h2> Demo </h2> <p><iframe src="https://codesandbox.io/embed/wtxjnm?view=preview"> </iframe> <br> <a href="https://codesandbox.io/p/sandbox/cookie-wtxjnm" rel="noopener noreferrer">Source Code</a></p> <h2> Journey </h2> <p>So, I've always wanted to create something like a cracking animation. I did my best to implement it into these cookies by using a clip path to determine which part of an element should be displayed.</p> <blockquote> <p>I love cookies</p> </blockquote> <h2> Reference Website </h2> <ul> <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path" rel="noopener noreferrer">Clip Path</a></li> <li><a href="https://unused-css.com/tools/clip-path-generator" rel="noopener noreferrer">Clip Path Generator</a></li> <li><a href="https://css-tricks.com/almanac/properties/a/animation/" rel="noopener noreferrer">Clip Animation</a></li> </ul> frontendchallenge devchallenge css