Frontend Challenge: CSS Art -December Edition

CSS Art Challenge 2024

This is a submission for Frontend Challenge - December Edition, CSS Art: December.

Inspiration

After stumbling upon Bryan James' site, where he created 30 endangered species utilizing CSS polygons, I took it as a sign to start experimenting with this nifty tool.

Demo

https://emmy-zhang.github.io/css-art/

Journey

• Sketch: Sketched out a partridge in triangles, inspired by the song 12 Days of Christmas.
• Outline: Outlined the elements in HTML, roughly molded them into the desired shapes with CSS polygons.
• Refine: Manually shifted the elements into place.
• Styling: Updated colors, added some animation for pizzaz.
• 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.

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!

The above is the detailed content of Frontend Challenge: CSS Art -December Edition. For more information, please follow other related articles on the PHP Chinese website!