木目の生地を使ったクリエイティブな看板デザイン

はじめに

このプロジェクトでは、「空想の谷」の歴史と「夢の湾」の繁栄を融合させたクリエイティブな看板デザインを作成する方法を学びます。木目の背景と傾いた上部の看板で看板をスタイリッシュにする方法を学び、通行人に魅力的な芸術的な体験を与えます。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下を学びます。

• 看板要素の境界半径と背景画像を設定する方法
• 上部の角を丸くし、上部の看板要素を傾ける方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

• border-radius や transform のような CSS プロパティを使って、独自のデザイン要素を作成する
• 背景画像を組み込んで、ウェブデザインの全体的な美意識を高める
• デザイン要素を組み合わせて、統一感のある視覚的に魅力的なレイアウトを作成する

プロジェクト構造を設定する

始めるには、実験環境を開き、ディレクトリ構造は以下の通りです。

├── css
│   └── style.css
├── images
│   └── woodiness.jpg
└── index.html

その中で：

• index.html はメインページです。
• images はプロジェクト画像を保存するフォルダです。
• css/style.css はコードを補完する必要がある CSS ファイルです。

WebIDE の右下隅にある Go Live ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動でページを更新して、ブラウザで以下のような表示を確認します。

看板の背景を設定する

このステップでは、看板要素の背景を設定し、角を丸くする方法を学びます。

1. css/style.css ファイルを開きます。

2. .billboard クラスを見つけます。

3. 以下のコードを追加して、境界半径と背景画像を設定します。

   border-radius: 10px;
   background-image: url(../images/woodiness.jpg);
   

   • border-radius プロパティは、.billboard 要素の境界半径を 10 ピクセルに設定し、角を丸くします。
   • background-image プロパティは、.billboard 要素の背景画像を images フォルダにある woodiness.jpg に設定します。

上部の看板を傾ける

このステップでは、上部の看板要素の上部の角を丸くし、傾ける方法を学びます。

1. css/style.css ファイルの .top-sign クラスを見つけます。

2. 以下のコードを追加して、上部の角を丸くし、要素を傾けます。

   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
   transform: skewX(-20deg);
   

   • border-top-left-radius および border-top-right-radius プロパティは、.top-sign 要素の左上と右上の角を半径 15 ピクセルに設定し、角を丸くします。
   • transform: skewX(-20deg) プロパティは、.top-sign 要素を x 軸方向に -20 度傾けます。

これらの 3 つのステップを完了すると、看板は丸くなった木目の背景を持ち、上部の看板は上部の角が丸くなって傾いた状態になります。完成した画像のようになります。

まとめ

おめでとうございます！このプロジェクトを完了しました。実力を向上させるために、LabEx でさらに多くの実験を行って練習してください。