フロントエンド チャレンジ: CSS アート - 12 月版

CSSアートチャレンジ2024

これは、フロントエンド チャレンジ - 12 月版、CSS アート: 12 月への提出物です。

インスピレーション

ブライアン ジェームスが CSS ポリゴンを利用して 30 種の絶滅危惧種を作成したサイトに偶然出会った後、私はこの気の利いたツールを使って実験を始める兆候と捉えました。

デモ

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

旅

• スケッチ: 12 Days of Christmas という歌にインスピレーションを得て、三角形のヤマウズラをスケッチしました。
• アウトライン: HTML の要素をアウトライン化し、CSS ポリゴンで目的の形状に大まかに成形します。
• 調整: 要素を手動で所定の位置に移動します。
• スタイリング: カラーを更新し、ピザ用のアニメーションを追加しました。
• モバイル: そうですね、「モバイルファースト」と言われるのには理由があります。小さい画面でテストすると要素が分散したため、小さい画面に合わせて要素の高さと幅を手動で更新しました。

Bryan James のサイトでは、既存の画像に対して JS トレーサーを使用してポリゴンを作成しました。私は時間と健全性を考慮して、あまり洗練されていないアプローチを選択しましたが、トレーサーを使用すれば、ポリゴンが動的に作成でき、モバイルのスタイル設定とアニメーションがはるかに簡単になったであろうと想像しています。おそらく次回のプロジェクトです :) 楽しかったです。でも、これでかなり勉強になりました!

以上がフロントエンド チャレンジ: CSS アート - 12 月版の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。