難易度:★★☆
プロパティ:radial-gradient
関連レッスン:Chapter2 レッスン3
HTMLの"photo"というクラス名の section タグに対しCSSを反映させていきます。
CSSのセレクタで クラス名"photo"を探しましょう。
background-image に radial-gradient を追加して、円形のグラデーションを作ります。
radial-gradient でカッコの中に、2色の色とその色が表示される範囲(-%)を指定すると円形のグラデーションが作成できます。
2色の値と値は , (カンマ) で区切るように注意しましょう。
サンプルでは #ffb553(オレンジ)と、transparent(色を表示させない) を指定しています。
#ffb553とtransparentに同じ%の指定をすると、色の境界線がはっきりします。
background-size を追加して、水玉のサイズを指定します。
background-sizeでは水玉のサイズを指定しています。
最初の値が水玉の横のサイズ、2つ目の値が縦のサイズです。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
水玉が等間隔に並んでいたら次のステップに進みましょう。
%の指定を #ffb553 と transparent で変えると、色と色の境界線がふわっとした水玉を作成できます。サンプルでは #ffb553 に20%を、transparent に60%を指定しています。
※ブラウザによっては境界線が黒っぽく表示されることがあります。
radial-gradient をもう一つ追加して、水玉を増やします。
2つ目の radial-gradient は1つ目の radial-gradient の後ろに , (カンマ) で区切って追加します。
サンプルではわかりやすいように水玉の色を pink(ピンク)にしています。
今は1つ目の水玉 (オレンジ) の下にピンクの水玉が重なって作られているので、見えていません。
background-positionで水玉の位置を指定できます。
最初の 0 0 は黄色の水玉の位置、20px 20px はピンクの水玉の位置で , (カンマ) で区切ります。
最初の値が水玉の横の位置、2つめの値が縦の位置です。
片方の水玉の位置を半分の距離づつずらすことで交互に並んでいるように見えます。
コピーしたコードを目的の箇所にペースト(貼り付け)するか、直接書いてみましょう。
ピンクの水玉の位置を 0 20px に変更すると、水玉が縦並びになります。
水玉が交互に並んでいたら完成です。