グラデーション

CoddyのHTMLジャーニー「CSS Mastery」セクションの一部 — レッスン 21/43。

CSSのグラデーションを使用すると、2色以上の色の間で滑らかな遷移を作成することができます。

シンプルな線形グラデーションから始めましょう：

/* 上から下への線形グラデーションを作成します */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

これにより、上部のオレンジ色（#ff9966）から下部の赤みがかった色（#ff5e62）へと変化するグラデーションが作成されます。

次の例のように、方向を指定したり、複数の色を使用したりすることもできます。

/* 左から右への線形グラデーションを作成します */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

チャレンジ

簡単

sunset-gradient という名前のクラスに対して、線形グラデーションの背景を適用するCSSルールを作成してください。グラデーションは以下の通りにしてください：

上から下へ向かう
色 #FFD700 (gold) で開始する
#FF4500 (orangered) へ遷移する

チートシート

CSSグラデーションは、linear-gradient()関数を使用して、色と色の間の滑らかな遷移を作成します：

/* 上から下への基本的な線形グラデーション */
.gradient-box {
  background: linear-gradient(to bottom, #ff9966, #ff5e62);
}

/* 方向と複数の色を指定した線形グラデーション */
.gradient-box {
  background: linear-gradient(to right, red, orange, yellow, green);
}

一般的な方向には、to bottom、to right、to left、およびto topなどがあります。

自分で試してみよう

<!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>

腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。