The latest articles on DEV Community by Emmy Zhang (@emmyzhang). https://dev.to/emmyzhang 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%2F438542%2Fe5cd2996-994c-40a8-a9bb-af620a0bee65.png https://dev.to/emmyzhang en Emmy Zhang Fri, 27 Dec 2024 04:40:43 +0000 https://dev.to/emmyzhang/frontend-challenge-css-art-december-edition-4pl0 https://dev.to/emmyzhang/frontend-challenge-css-art-december-edition-4pl0 <h2> CSS Art Challenge 2024 </h2> <p>This is a submission for <a href="https://dev.to/challenges/frontend-2024-12-04">Frontend Challenge - December Edition, CSS Art: December.</a></p> <h2> Inspiration </h2> <p>After stumbling upon Bryan James' <a href="http://species-in-pieces.com" rel="noopener noreferrer">site</a>, where he created 30 endangered species utilizing CSS polygons, I took it as a sign to start experimenting with this nifty tool.</p> <h2> Demo </h2> <p><a href="https://emmy-zhang.github.io/css-art/" rel="noopener noreferrer">Demo Site</a><br> <a href="https://github.com/emmy-zhang/css-art" rel="noopener noreferrer">Source Code</a><br> <a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8q0zz83r7vb1zpb64dtd.gif" class="article-body-image-wrapper"><img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8q0zz83r7vb1zpb64dtd.gif" alt="demo" width="800" height="510"></a></p> <h2> Journey </h2> <ul> <li>Sketch: Sketched out a partridge in triangles, inspired by the song 12 Days of Christmas.</li> <li>Outline: Outlined the elements in HTML, roughly molded them into the desired shapes with CSS polygons.</li> <li>Refine: Manually shifted the elements into place.</li> <li>Styling: Updated colors, added some animation for pizzaz.</li> <li>Mobile: Well, there's a reason why they say "mobile first." Upon testing on smaller screens the elements scattered, so I manually updated the element's height and width to accommodate smaller screens.</li> </ul> <p>In Bryan James' site a JS tracer was used on existing images to create the polygons. I opted for a less sophisticated approach for time and sanity sake, but I imagine with a tracer the polygons could have been created dynamically and would have made mobile styling and animations a lot easier - perhaps a project for next time :) I had fun and learned quite a bit with this one though!</p> frontendchallenge devchallenge css