Frontend Challenge : CSS Art - Édition de décembre

Défi artistique CSS 2024

Ceci est une soumission pour Frontend Challenge - Édition de décembre, CSS Art : décembre.

Inspiration

Après être tombé sur le site de Bryan James, où il a créé 30 espèces menacées à l'aide de polygones CSS, j'ai pris cela comme un signe pour commencer à expérimenter cet outil astucieux.

Démo

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

Voyage

• Croquis : Esquisse d'une perdrix en triangles, inspirée de la chanson 12 Days of Christmas.
• Contour : décrit les éléments en HTML, les a grossièrement moulés dans les formes souhaitées avec des polygones CSS.
• Affiner : mise en place manuelle des éléments.
• Style : couleurs mises à jour, ajout d'une animation pour pizzaz.
• Mobile : Eh bien, il y a une raison pour laquelle ils disent « le mobile d'abord ». Lors des tests sur des écrans plus petits, les éléments se sont dispersés, j'ai donc mis à jour manuellement la hauteur et la largeur de l'élément pour s'adapter aux écrans plus petits.

Dans le site de Bryan James, un traceur JS a été utilisé sur des images existantes pour créer les polygones. J'ai opté pour une approche moins sophistiquée pour des raisons de temps et de raison, mais j'imagine qu'avec un traceur, les polygones auraient pu être créés dynamiquement et auraient rendu le style et les animations mobiles beaucoup plus faciles - peut-être un projet pour la prochaine fois :) Je me suis amusé et J'ai quand même beaucoup appris avec celui-ci !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!