linear-gradientについて

Question

linear-gradientについて

linear-gradient()

例えばMDNに載っているCSSdemoを見ても、0.25turn、336deg、 orange 25%やcyanなど、多くの値が使われています。
これらのlinear-gradientの値の種類と、コードを書く際の入力の順番の有無を教えていただけないでしょうか。

Comments

[kei344]

何がわからないのかがわかりません。もう少し具体的にしてください。

【質問するときのヒント｜teratail（テラテイル）】
https://teratail.com/help/question-tips#questionTips2
> 2. 質問をする前に自分で何がわからないのかを把握しましょう

[sshino]

例えばMDNに載っているCSSdemoを見ても、0.25turn、336deg、 orange 25%やcyanなど、多くの値が使われています。
これらのlinear-gradientの値の種類と、コードを書く際の入力の順番の有無を教えていただけないでしょうか。

[kei344]

（質問文は編集できます）この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。また、参考にされているページのURLも提示されたほうが解答が付きやすいと思います。

Answer 1

.selector {
background: linear-gradient([グラデーションの方向], [色1] [色1の位置], [色2] [色2の位置], [色3] [色3の位置]...);
}

順番的には、主にこんな感じで入れられるようになっています。

＜グラデーションの方向＞
グラデーションの方向、または傾きを指定することができます。
デフォルト値では上から下のグラデーションになり、そのままでいいのであれば省略可能です。

■指定可能な値

・「to ○○(topやleftなどの方向)」
→指定した方向を終端としてグラデーションします。
（to topなら「下から上」）

・「○○deg（回転角度）」
→0°（下から上のグラデーション）から指定した値だけ時計回りに角度を変えます。
（45degなら「左下から右上」）

・「○○turn（回転数）」
→○○degと同じく、0°から指定した値だけ時計回りに角度を変えます。
0turn～1turnまでが360°なので、小数点で指定することになります。
（0.125turnなら「左下から右上」）

＜色＞
グラデーションさせる色と、その色をどこに置くかの位置指定ができます。
色の位置は省略可能で、とくに指定がなければ均等に位置が割り振られた状態でグラデーションします。

■指定可能な値

・色の名前（white、orange、transparentなど）
・rgba(XXX[R],XXX[G],XXX[B],X[透明度])

・絶対位置（px、em、vwなど）
・相対位置（○○%）

Comments

[sshino]

細かく説明して頂き有難うございました！