フロントエンドの課題: スペース。

私はまだこれに取り組んでいますが、公開して構築してみたかったのです。コードペン ウィンドウでは画像の一部が切り取られるため、.5x ボタンをクリックします。

これは、Frontend Challenge v24.09.04、CSS アート: スペースへの提出物です。

インスピレーション

チャレンジは宇宙だったので、宇宙の背景から始めました。純粋な黒は欲しくなかったので、黒、青、紫の背景を線形グラデーションで遊びました。殺風景な#000ブラックよりもさらに満足のいくものに仕上がりました。

デモ

これが私のコードペンです。完了したら、コードをここに投稿することに切り替えるかもしれません。

コードペンウィンドウでは画像の一部が切り取られるので、.5xボタンをクリックします。

旅

夏のチャレンジでビーチに夕日を描いたときのコードを再利用しました。太陽の色のグラデーションは、木星の赤い斑点を思い出させました。

色を増やしてスポットを追加しました。私は実際の太陽系を作りたくはなく、より様式化された宇宙のバージョンを望んでいました。最初は惑星を重なり合わせたいと考えていました。

黄色の惑星を作成したとき、白を使用することでさらに深みを与えました。そこで、木星のような惑星にハイライトを追加しました。

次に、船が銀河に入ることができるワームホールの開口部を追加しました。ワームホールは楕円形で、変換: 傾斜して穴に深さを与えます。

まとめ

私はこれらのフロントエンドの課題がとても好きです。プロジェクトで創造性を発揮するのは、いつでも素晴らしいことです。

以上がフロントエンドの課題: スペース。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。