Cozy Ramen Night 🍜🌙のカバー画像

Allen Labrague

Cozy Ramen Night — Pure CSS Art 🍜🌙

これは Frontend Challenge - Comfort Food Edition, CSS Art の投稿です。

インスピレーション

このチャレンジでは、静かな夜、温かい食事、一日の終わりに熱々の食べ物をいただくときの心地よさから着想を得た、居心地の良いラーメンの丼を作成しました。

ラーメンは、麺や具材から丼、箸、湯気、窓、月、照明、木製のテーブルまで、多くの小さなCSSの細部を1つの完成したイラストに組み合わせることができ、題材として最適だと感じました。

完成した作品は、小さなレストランで穏やかな夜にラーメンを楽しんでいるような、温かく、穏やかで、少し懐かしい雰囲気になるように心がけました。🍜🌙

デモ

完成したCSSアートはこちらです：

このイラストはHTMLとCSSを使用して作成されました。画像やSVGイラストは使用しておらず、JavaScriptパネルは空のままにしています。

制作過程

まず、レイヤー状のシェイプ、グラデーション、ボーダー、border-radius、シャドウを使用してメインの丼を作成しました。丼が完成した後、ブイヨンと個々のラーメンの具材を追加しました：

  • 麺
  • 半熟卵
  • ねぎ
  • きのこ
  • 海苔
  • ナルト

最も難しかった点の1つは、具材が丼の上に浮いているように見えず、自然に丼の中に収まっているように配置することでした。奥行きを出すために、absolute positioning、rotation、scaling、レイヤリング、z-index を使用しました。

また、周囲の環境を追加して居心地の良い雰囲気を強化しました。シーンには月明かりの窓、輝く吊り下げランプ、箸、ソースボトル、ナプキン、木製のテーブルが含まれます。

アニメーションする湯気は、私のお気に入りのディテールの1つです。これは、ボーダー、不透明度、ぼかし、transform、キーフレームアニメーションをすべてCSSで使用して作成しました。また、月、星、雲にも微妙なアニメーションを追加して、シーンをより生き生きとしたものにしました。

このプロジェクトを通じて、以下を練習しました：

  • 基本的なHTML要素で複雑なイラストを作成する
  • グラデーションを使用して照明とテクスチャを作成する
  • 位置指定と z-index を使用して多くのレイヤー要素を管理する
  • JavaScriptなしでCSSアニメーションを構築する
  • CSSアートをさまざまな画面サイズでレスポンシブにする
  • アクセシビリティのために reduced-motion の設定をサポートする

このアートワークがCSSを主なクリエイティブツールとして使用しながらも、詳細で表現豊かに感じられることを特に誇りに思っています。

ご覧いただきありがとうございます！楽しいコーディングと、よい食事を！🍜✨

使用技術

  • Semantic HTML
  • CSS gradients
  • CSS shapes
  • CSS animations
  • Responsive media queries
  • No JavaScript
  • No external images

ライセンス

このプロジェクトはMITライセンスの下で利用可能です。