難易度:★★☆
プロパティ:background: linear-gradient
関連レッスン:Chapter2 レッスン2
header タグで囲まれているところに対し、CSSを反映させていきます。
CSSのセレクタで header を探しましょう。
サンプルでは header に反映させます。
background: linear-gradient を追加して、グラデーションの指定をします。
カッコの中に色を2つ以上指定するとグラデーションが作成できます。
サンプルでは#FA8BFF(紫色)→#2BD2FF(ブルー)→#2BFF88(黄緑) の3色を指定しています。
カラーコードの後ろの % はその色の位置を指定しています。0%は一番上、50%は真ん中、100%は一番下になります。
※background-imageは反映されなくなります。
to 〜 の後に値を指定するとグラデーションに方向をつけることができます。
サンプルでは、to bottom right を追加して、右下方向のグラデーションをつけています。
値と値は , (カンマ) で区切るように注意しましょう。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
背景がグラデーションになっていたら完成です。