どうも！LSSです！！
CSSのグラデーション、○○-gradient系は、できる事が多くて奥が深いです。
凝れば凝るほどコードが複雑になり、「分かりにくい」という印象を受けてしまう事も。
色々な事ができるがゆえに、色々やろうとすると難しい部分も出てきますが、「もっとも簡単なグラデーション」はとってもシンプルだったりします。
ごくシンプルなグラデーション例
分かりやすい色で、「青→黄→赤」の順に変化するグラデーションを例に挙げてみます。
信号機の色ですね。
例えば「linear-gradient」なら、
background-image:linear-gradient(blue,yellow,red);
となります。
以下、枠のサイズを指定する「width: 300px; height: 300px;」をつけた３種類のグラデーションのサンプルとコードを並べてみます。
<div style="width: 300px; height: 300px;
background-image: linear-gradient(blue,yellow,red);
"> </div>
<div style="width: 300px; height: 300px;
background-image: radial-gradient(blue,yellow,red);
"> </div>
<div style="width: 300px; height: 300px;
background-image: conic-gradient(blue,yellow,red);
"> </div>
以上、３つの例は赤太字部分以外は全く同じ文字列です。
グラデーションの種類がどれであれ、
background-image:○○-gradient(blue,yellow,red);
という指定だけでグラデーションを背景に描く事ができます。
色を付け足してみましょう
先ほどの例は、「blue,yellow,red」と３つの色をカンマ区切りで並べていました。
この色数は２つ以上であればいくつでも構いません。
例えば先ほどの３色に加えて、「white,purple,black」を後ろに付け足してみます。
<div style="width: 300px; height: 300px;
background-image: linear-gradient(blue,yellow,red,white,purple,black);
"> </div>
<div style="width: 300px; height: 300px;
background-image: radial-gradient(blue,yellow,red,white,purple,black);
"> </div>
<div style="width: 300px; height: 300px;
background-image: conic-gradient(blue,yellow,red,white,purple,black);
"> </div>
だいぶ賑やかになりましたね^^
今回のまとめ
○○-gradient系は、CSSの基本である、
プロパティ名:値;
の値の部分に入れる関数で、例えば背景画像を指定する「background-image」プロパティに「linear-gradient」を指定する場合、
background-image:linear-gradient(色,色,色々な色…);
のように ( ) 内に色名（色コードも可）をカンマ区切りで並べるだけで、勝手にグラデーションになります。
ここから、例えば「色の割合を指定して変更したい」や「linear-gradientのグラデーションの方向を変えたい」、「radial-gradientやconic-gradientの中心位置を変えたい」と思った時に、それらを実現する書き方が用意されていますので、コードを付け足していく事になります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
