Frontend Challenge: CSS Art – Dezemberausgabe

CSS Art Challenge 2024

Dies ist eine Einreichung für Frontend Challenge – Dezemberausgabe, CSS Art: Dezember.

Inspiration

Nachdem ich auf die Website von Bryan James gestoßen bin, auf der er mithilfe von CSS-Polygonen 30 gefährdete Arten erstellt hat, nahm ich das als Zeichen, mit diesem raffinierten Tool zu experimentieren.

Demo

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

Reise

• Skizze: Skizzierte ein Rebhuhn in Dreiecken, inspiriert vom Lied 12 Days of Christmas.
• Gliederung: Die Elemente in HTML umrissen und sie mit CSS-Polygonen grob in die gewünschten Formen geformt.
• Verfeinern: Die Elemente wurden manuell an ihren Platz verschoben.
• Styling: Aktualisierte Farben, einige Animationen für Pizzaz hinzugefügt.
• Mobil: Nun, es gibt einen Grund, warum man „Mobile first“ sagt. Beim Testen auf kleineren Bildschirmen waren die Elemente verstreut, daher habe ich die Höhe und Breite des Elements manuell aktualisiert, um sie an kleinere Bildschirme anzupassen.

Auf der Website von Bryan James wurde ein JS-Tracer für vorhandene Bilder verwendet, um die Polygone zu erstellen. Aus Gründen der Zeit und der Vernunft habe ich mich für einen weniger anspruchsvollen Ansatz entschieden, aber ich kann mir vorstellen, dass mit einem Tracer die Polygone dynamisch hätten erstellt werden können und das mobile Styling und die Animationen viel einfacher gemacht hätten – vielleicht ein Projekt für das nächste Mal :) Ich hatte Spaß und Allerdings habe ich damit einiges gelernt!

Das obige ist der detaillierte Inhalt vonFrontend Challenge: CSS Art – Dezemberausgabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!