CSSでグラデーション
背景色やボタンなどで活躍すると思われるグラデーションの設定方法を紹介していきます。
ジェネレーターで作ってしまうのが一番簡単ですが、微調整のたびにジェネレーターまで行くのはおっくうですよね
この記事の目次
〇〇-gradient()関数
CSSを使ってグラデーションを指定するための関数が〇〇-gradient()関数になります
この関数をbackgroundプロパティに使うことによってグラデーションの表現を実現していきます
まずは簡単な使い方を見てみます
linear-gradient()関数
linear-gradient()関数は線の形でグラデーションを表現するときに使う関数で
()の中に開始色と終了色をカンマ区切りで指定します。
簡単に使うのであれば二つの値で使うことができます。この時開始色が要素の左端から始まり、
右端で終了色になります
中間地点で混ざり合う感じです
radial-dradient()関数
radial-gradient関数は円の形にグラデーションを表現する関数になります
()の中に開始色と終了色をカンマ区切りで指定します。
簡単に使うのであれば二つの値で使うことができます。ここまではlinear-gradientと同じ
違いは開始色が要素の中心から始まり、要素の一番外側で終了色になります
|
1 2 3 4 5 6 7 |
.linear{ background:linear-gradient(#f00,#0f0); } .radial { background:radial-gradient(#f00,#0f0); } |
細かく見ていく前に注意点
最新のブラウザならば問題なく使えますが古いブラウザのことを考えて、 使うときはベンダープレフィックスの設定も併せてするとGOOD
ベンダープレフィックスとは？
※プロパティ名の前に書く「-webkit-」「-moz-」「-o-」「-ms-」などの文字のことを指しています。
これを書くことで古いブラウザにCSS3のプロパティを対応させることができます
書くときはベンダープレフィックスを先に書いて最後に通常のものを入れるようにしましょう
- -webkit-：Google ChromeとSafariに対応させる
- -ms-：IEに対応させる
- -moz-：Firefoxに対応させる
- -o-：operaに対応させる
グラデーションならば下のような順番で記述していきましょう
|
1 2 3 |
background: -moz-linear-gradient(開始,終了); background: -webkit-linear-gradient(開始,終了); background: linear-gradient(開始,終了); |
linear-gradient()関数で向きの設定
まずは、基本的な構文から
|
1 2 3 |
background: -moz-linear-gradient(開始位置, 開始色, 終了色); background: -webkit-linear-gradient(開始位置, 開始色, 終了色); background: linear-gradient(to 方向, 開始色, 終了色); |
デフォルトでは左から右に向かっていきますがグラデーションの方向を指定することも可能になっています
ベンダープレフィックスは方向の指定方法が若干違っていますので注意
上から下へグラデーション
開始色が「#f00」 終了色が「#fff」でグラデーションを作っていきます
これをブラウザの最上部から開始して最下部で終了するグラデーションに設定するのであれば、
一つ目の値にまずは「to」を付けて半角スペース
スペースの後に方向を指定します。
この時の方向はグラデーションしていく方向を入れます
今回の例では、上から下にグラデーションをさせていくので「to bottom」(下方向)を指定しましょう。
ベンダープレフィックスは書き方が逆になりどこから開始するかを指定します
上から下へ向かっていくグラデーションなので、開始位置は「top」と指定しておきましょう
今回のコード
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(top,#f00,#fff); background: -webkit-linear-gradient(top,#f00,#fff); background:linear-gradient(to bottom,#f00,#fff); } |
右から左にグラデーションさせたい
そんな時は開始位置を変えましょう
右から始まり、左で終わるのであれば「to left」(左方向に向かう)
ベンダープレフィックスの開始位置の方を「right」(右から始まる)
のように設定をしていきましょう
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(right,#f00,#fff); background: -webkit-linear-gradient(right,#f00,#fff); background:linear-gradient(to left,#f00,#fff); } |
実行結果
斜め方向にグラデーション
斜めももちろん指定できます
斜めの指定をするときは、半角スペース区切りで方向を二つ指定してあげましょう
例えば左上から右下に向かってグラデーションさせるのであれば下記のように書きましょう
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(top left,#f00,#fff); background: -webkit-linear-gradient(top left,#f00,#fff); background:linear-gradient(to bottom right,#f00,#fff); } |
「to bottom right」(右下に向かう)
ベンダープレフィックスの開始位置を
「top left」(左上から始まる)
それぞれ指定しましょう
実行結果
linear-gradient()関数で色が変化する位置を変える
色が変化する位置を変えたいのであればカラーコードの後に半角スペースを入れ変化位置をを％を使って指定します 例えば開始から30％の位置から変化をさせたいのであれば下のコードのように書きます 位置の設定はベンダープレフィックスも同じ指定方法になります|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(top,#f00 30%,#fff); background: -webkit-linear-gradient(top,#f00 30%,#fff); background:linear-gradient(to bottom,#f00 30%,#fff); } |
色を3色以上使ってグラデーション
ここまでは2色でグラデーションをさせていましたが3色以上でのグラデーションも設定可能
どうしたらいいかというと色の指定をカンマ区切り追加するだけ
まず色を追加してみましょう
例）赤→黄→緑
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(top,#f00,#ffff00,#0f0); background: -webkit-linear-gradient(top,#f00,#ffff00,#0f0); background:linear-gradient(to bottom,#f00,#ffff00,#0f0); } |
実行結果
これに変化させる位置も設定していくと変化の具合も調整できます カラーコードの後に半角スペースを入れ変化位置をを％を使って指定する作法は変わりません
例）上から赤で始まり30%の位置で黄色に変わる、そこから緑と混ざり合ってグラデーション
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(top,#f00,#ffff00 30%,#0f0); background: -webkit-linear-gradient(top,#f00,#ffff00 30%,#0f0); background:linear-gradient(to bottom,#f00,#ffff00 30%,#0f0); } |
実行結果
もっと色を混ぜ合わせることも可能ですが割愛
角度を指定しつつグラデーション
グラデーションのかかり具合は角度でも指定ができます
単位は「deg」を使います
「to 〇〇」と方向を指定していた部分を好きな角度で指定します
ベンダープレフィックスの指定方法にクセがあるのでそれだけは注意
0deg：下から上 45deg：左下から右上 90deg：左から右 135deg：左上から右下 180deg：上から下
羅列しましたが値が増えると時計回りに方向が変わる仕様です
ベンダープレフィックスのは
deg ＝ 90 – 通常のdeg
の形で90から通常のdegを引いた値を設定する必要があります
例として中途半端な10degの位置で指定してみます
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(10deg,#f00,#ffff00 30%,#0f0); background: -webkit-linear-gradient(10deg,#f00,#ffff00 30%,#0f0); background:linear-gradient(10deg,#f00,#ffff00 30%,#0f0); } |
実行結果はこのようになります
この表示結果を見るだけならうまくいっているのですが、
ベンダープレフィックスが間違っていますので、
古いブラウザで表示すると思った表示になりません
計算式に当てはめて「90-10=80deg」ということで修正しましょう
|
1 2 3 4 5 |
body{ background: -moz-linear-gradient(80deg,#f00,#ffff00 30%,#0f0); background: -webkit-linear-gradient(80deg,#f00,#ffff00 30%,#0f0); background:linear-gradient(10deg,#f00,#ffff00 30%,#0f0); } |
bracketsなら値にマウスカーソルを重ねればプレビューウインドウが小さく表示されますので確認しましょう。
radial-dradient()関数での細かい設定
radial-gradient()を使うと中央から外側へと広がるような円形のグラデーションを付けることができます
※ グラデーションの中心点はずらせないみたいです。
radial-gradientの書き方
まずはベンダープレフィックス付きでの記述方法から
|
1 2 3 4 5 |
body{ background: -moz-radial-gradient(中心の色,外側の色); background: -webkit-radial-gradient(中心の色,外側の色); background:background:radial-gradient(中心の色,外側の色); } |
値の効き具合が違うだけで見ての通りほとんど同じように設定できる
例えばこのような指定をすると
|
1 2 3 4 5 |
body{ background: -moz-radial-gradient(#f00,#fff); background: -webkit-radial-gradient(#f00,#fff); background:radial-gradient(#f00,#fff); } |
実行結果はこのようになる
色が変わる位置を変える
円形に広がるグラデーションの場合でも色が変わる位置の設定ができます
やり方に関しては線形と同じ
色の後に半角スペースで区切り位置を指定します。
|
1 2 3 4 5 |
body{ background: -moz-radial-gradient(#f00 30%,#fff); background: -webkit-radial-gradient(#f00 30%,#fff); background:radial-gradient(#f00 30%,#fff); } |
今回のコードでプレビューすると、以下のように表示されます
中心から30%の位置までは開始色のまま
30%を過ぎたところからグラデーションになっています。
※ 外側の色にも設定できます
三色以上のグラデーション
これに関しても線形と同じで中心の色と外側の色の間に色の設定を追加すればOK
そこまで難しくはないと思いますが参考用のコードを作りました
|
1 2 3 4 5 |
body{ background: -moz-radial-gradient(green,yellow,red); background: -webkit-radial-gradient(green,yellow,red); background:radial-gradient(green,yellow,red); } |
実行結果
基本的な使い方はここまで
