こんにちは朱夏です。
今回は要素の色をグラデーションにしてみました。
縦や横にグラデーション
円形にグラデーション
あとがき
縦や横にグラデーション
最初は、縦や横など、一方向にグラデーションを付ける方法です。
グラデーションを使用するには、「background: linear-gradient();」を使います。
()の中に、グラデーションの向きや色の情報を書いていくことでグラデーションを付ける事が出来ます。
先ずは開始の色と終了の色だけ指定してグラデーションを付けてみます。
See the Pen
OJVdZqG by 朱夏 (@syunatsu1)
on CodePen.
スタートを赤(#ff0000)、ゴールを青(“0000ff)にしています。
スタートが上端、ゴールが下端で均等にグラデーションがかかる様ですね。
今度は横向きにグラデーションをかけてみます。
考え方としては、グラデーションの向きを90度回転させる感じです。
See the Pen
MWwLXep by 朱夏 (@syunatsu1)
on CodePen.
「90deg」で90度回転させたらこうなりました。
どうやら角度を増やすと左に回転していくようです。
この角度を「45deg」などにすると、斜めにグラデーションをかける事も出来ます。
次に色の幅について書いていきます。
先にサンプルを見てもらった方が解りやすいと思うのでこちらをご覧ください。
See the Pen
vYObrao by 朱夏 (@syunatsu1)
on CodePen.
サンプルでは、紅色に50pxを指定しています。
すると、紅色が50px続いて、その後グラデーションの変化が始まるといった感じになりました。
続けていきます。
途中で色の数を増やして、複数の色でグラデーションさせる事も出来ます。
See the Pen
gOpqKEP by 朱夏 (@syunatsu1)
on CodePen.
こんな感じです。
今回のサンプルでは、間に緑を指定しました。
円形にグラデーション
次は、円の形にグラデーションをかけてみます。
円の形にするには、「background:radial-gradient();」を使います。
こちらも()の中に、円の形や中心、色などを書いていきます。
こちらも最初に一番シンプルな形状で作成してみます。
See the Pen
BaNMPKR by 朱夏 (@syunatsu1)
on CodePen.
中心を開始位置に、一番外側を終了位置にグラデーションを付けています。
今回は要素のサイズを縦100px、横100pxにしているので正円のグラデーションが出来ましたが、縦横比の違う長方形であれば、そのサイズに合わせた楕円に変形します。
次は、要素の縦横比に関係なく正円の形でグラデーションする方法になります。
See the Pen
OJVdwEO by 朱夏 (@syunatsu1)
on CodePen.
こんな感じで、要素の形に関係なく正円のグラデーションを作るには、「circle」を追記する事で出来ます。
次は円の中心をずらす方法です。
中心を指定する方法は2つあります。
- 言葉で指定する方法
- 縦横それぞれの割合を指定する方法
それぞれの方法を使ったサンプルを置いておきます。
See the Pen
KKpJxpY by 朱夏 (@syunatsu1)
on CodePen.
両方とも別々の指定方法ですが、結果は同じになっています。
細かく位置を指定したいときは割合で指定する方法が向いています。
そして、こちらでは書いていませんでしたが、色の幅ももちろん変更できます。
あとがき
というわけで、今回は色のグラデーションについてかいてみました。
今回のまとめはこちら。
- 「background: linear-gradient();」で一方向にグラデーション
- 「background:radial-gradient();」で円形にグラデーション
- 2色以外にも3色、4色でグラデーションを作る事も可能
透過も組み合わせる事が出来るので、アレンジの仕方によっては画像に対して縁をぼかすといった効果を付ける事も可能だと思います。
今回は以上です。
次回もよろしくお願いします。
