グラデーション
CoddyのHTMLジャーニー「CSSマスタリー」セクションの一部。レッスン 21/43。
CSSのグラデーションを使うと、2色以上の間を滑らかに移り変わらせることができます。
シンプルな線形グラデーションから始めましょう。
/* 上から下への線形グラデーションを作成する */
.gradient-box {
background: linear-gradient(to bottom, #ff9966, #ff5e62);
}これにより、上部のオレンジ色 (#ff9966) から下部の赤みがかった色 (#ff5e62) へと変化するグラデーションが作成されます。
方向の指定は省略できます。省略した場合、linear-gradient() は to bottom と同じく、上から下へグラデーションを適用します。
background: linear-gradient(#ff9966, #ff5e62); /* 上から下へ */次の例のように、方向を指定して複数の色を使用することもできます。
/* 左から右への線形グラデーションを作成する */
.gradient-box {
background: linear-gradient(to right, red, orange, yellow, green);
}
チャレンジ
簡単線形グラデーションの背景を適用する、sunset-gradientという名前のクラスのCSSルールを作成してください。グラデーションは次のようにします。
- 上から下へ進む
- 色 #FFD700（金色）で始まる
- #FF4500（オレンジレッド）へ変化する
自分で試してみよう
<!DOCTYPE html>
<html>
<head>
<style>
.sunset-gradient {
border: 3px solid black;
height: 300px;
width: 100%;
/* Write your CSS rule here */
}
</style>
</head>
<body>
<div class="sunset-gradient"></div>
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
CSSマスタリーのすべてのレッスン
自分で練習してみよう: Webプレイグラウンド