ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS アート: 12 月 - モモイロインコの夏の日々

CSS アート: 12 月 - モモイロインコの夏の日々

DDD
リリース: 2024-12-30 20:10:16
オリジナル
1029 人が閲覧しました

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

インスピレーション

12月の夏休みの合間にシドニーで午後の散歩をしていたとき、たくさんのモモイロインコ(ピンクとグレーの在来種のオウム)が遊んでヒナに餌を与えているのに気づきました。少し調べてみたところ、彼らの繁殖期は通常7月から12月までであることがわかりました。美しく鮮やかな色彩を持ち、暖かい午後の散歩を楽しむモモイロインコは、オーストラリアのクリスマスの象徴的な部分のように感じられます。

デモ

  • ライブデモ: https://naomijustin.github.io/Galah-Days-of-Summer/
  • コード: https://github.com/naomijustin/Galah-Days-of-Summer CSS Art: December - Galah Days of Summer

  • この季節のモモイロインコの遊び心を強調できるような、見た目の美しさだけでなく、遊び心のあるものを作りたいと思いました。ユーカリの葉を食べるモモイロインコを作ることにしました。
  • 鳥の要素を構成するために、クリップパスと境界半径を組み合わせて有機的な形状を作成し、スケールを変換できるすべての鳥の要素を格納するコンテナを使用しました。コンテナーについては、相対位置と絶対位置を使用して、これをページの中央に配置しました。次に、コンテナ内のすべての要素に対して、異なる Z インデックス値を使用してそれらを階層化しました。
  • より複雑な形状の場合、背景にスタッキング グラデーションとブレンド モードを使用して、線形グラデーションと半径グラデーションでより複雑なシェーディングを作成する方法を見つけました。

以上がCSS アート: 12 月 - モモイロインコの夏の日々の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート