背景やサイトの一部にグラデーションを使用したいときにグラデーションの画像を用意する方法もあります。しかし、CSSでグラデーションを指定したほうが楽に実装することができますし、あとでデザインに変更がでた場合も修正しやすくなります。
今回は、CSSでのグラデーション指定方法をご紹介します。
線形グラデーションの指定方法
線形グラデーションを生成するには、linear-gradient（）を使用します。
|
1 2 3 |
要素{ background: linear-gradient(pink, red); } |
|
1 2 3 |
要素{ background: linear-gradient(開始色, 終了色); } |
なにも指定しない場合は、デフォルトで上から下へのグラデーションになります。
グラデーションの方向を変えたい場合はこのように記述します。
|
1 2 3 |
要素{ background: linear-gradient(to right, lightblue, blue); ] |
|
1 2 3 |
要素{ background: linear-gradient(方向, 開始色, 終了色); ] |
方向は、上から下の場合は「to bottom」のように、「to」の後にグラデーションが終了する位置を指定します。
斜めへのグラデーションも同様に、左上から右下の場合は「to right bottom」と横と縦の位置を指定します。
放射状グラデーションの指定方法
放射状グラデーションを生成するには、radial-gradient（）を使用します。
|
1 2 3 |
要素{ background: radial-gradient(red 0, blue 100%); } |
|
1 2 3 |
要素{ background: radial-gradient(開始色(中心色) 開始位置, 終了色(外側の色) 終了位置); } |
なにも指定しない場合は、要素の大きさに合わせたグラデーションになります。
正円のグラデーションにしたい場合は「circle」を開始色の前に記述して「,（カンマ）」で区切ることで指定できます。
複数の色を使ったグラデーションの指定方法
|
1 2 3 |
要素{ background: linear-gradient(to bottom, red, orange, yellow, green, blue, indigo, violet); } |
|
1 2 3 |
要素{ background: linear-gradient(方向, 開始色, 追加色, 終了色); } |
開始色と終了色の間に追加する色のコードを入れることで、複数の色のグラデーションを実装することができます。追加色はいくつでも追加することができます。なにも指定しない場合は、デフォルトで要素に対して均一な間隔になります。
下記のように記述すると、グラデーションの間隔を調整することもできます。
|
1 2 3 |
要素[ background: linear-gradient(to bottom, red 0, yellow 70%, blue 100%); } |
|
1 2 3 |
要素[ background: linear-gradient(方向, 開始色 開始位置, 追加色 追加する位置, 終了色 終了位置); } |
位置は割合で指定します。要素の全体を100%としたときに、だいたい何%の間隔で色を追加したいのか決めておくと指定しやすくなるでしょう。
グラデーションを使用するときに便利なツール
CSS3 GENERATORを使用すれば、思いどおりのグラデーションの開始色と終了色のカラーコードを手軽に手に入れることができます。
