美しいレターヘッド付きの便箋の作成
好印象を与えたいのなら、素敵なレターヘッドの便箋に手紙を書くのはとても良い考えです。この評価では、そのような見た目のオンラインテンプレートの作成に挑戦します。
| 前提知識: | この評価を試みる前に、このモジュールのすべての記事を読んでおくべきです。 |
|---|---|
| 目的: | CSS ボックスモデルの理解と、背景の実装などの他のボックス関連機能をテストすること。 |
出発点
この評価を開始するには、次のことが必要です。
- HTML と CSS のローカルコピーを作成します — それらを
index.htmlとstyle.cssとして新しいディレクトリーに保存します。 - 上部（top）、下部（bottom）、ロゴ（logo）の画像のローカルコピーを、コードファイルと同じディレクトリーに保存します。
また、CodePen、JSFiddle、Glitch などのオンラインエディターを使用することもできます。 これらのオンラインエディターのいずれかに HTML を貼り付けて CSS を入力してください。
メモ: もし行き詰まったら、コミュニケーションチャンネルのいずれかに連絡してみてください。
プロジェクト概要
レターヘッド付きの便箋のテンプレートを作成するのに必要なファイルを与えられました。 ファイルをまとめるだけでいいのです。 目的を達するには、次のことが必要です。
メインの手紙
-
CSS を HTML に適用します。
-
background宣言を手紙に追加します。- 上部の画像を手紙の上部に固定します。
- 下部の画像を手紙の下部に固定します。
- 前記の両方の背景の上に半透明のグラデーションを追加して、手紙に少し質感を与えます。 上部と下部のすぐ近くで少し暗くしますが、中央の大部分は完全に透明にします。
-
前記の宣言をサポートしていないブラウザーのための代替として、単に top の画像を手紙の上部に追加する別の
background宣言を追加します。 -
手紙に白い背景色を追加します。
-
配色の他の部分と調和している色で、手紙に 1mm の上下の実線の境界線を追加します。
ロゴ
- h1 にロゴを背景画像として追加します。
- ロゴにフィルターを追加して、微妙なドロップシャドウを付けます。
- 今度はフィルターをコメントアウトし、丸い画像の形に沿った（ややクロスブラウザー互換の）別の方法でドロップシャドウを実装します。
ヒントとコツ
- 代替バージョンの宣言を最初に配置し、その後に新しいブラウザーでのみ機能するバージョンを配置することによって、古いブラウザーのための代替を作成できることを忘れないでください。 古いブラウザーは最初の宣言を適用して 2 番目の宣言を無視しますが、新しいブラウザーは最初の宣言を適用してから 2 番目の宣言で上書きします。
- ご希望の場合は、評価用に独自のグラフィックを自由に作成してください。
