グラデーションを効果的に使えば、印象的なWebサイトを作ることができます。
ただし、間違ったグラデーションの使い方をすると一気にダサい雰囲気になってしまいます。
今回は、Webサイトにグラデーションを使う方法を紹介します。
CSSのコードを紹介する前に、グラデーションのコツも解説しておきます。
ダサいグラデーション
まずは、いかにも「ダサい」グラデーションを紹介します。
彩度が高く、色が多い
彩度が高く、色が多すぎるすると一気にダサいグラデーションになります。
必要ないのにグラデーション
これは酷い。さすがにこのブログを読んでいる人はこのような無意味なグラデーションを使わないと信じています。
グラデーションを使う時の心得
効果的なグラデーションにするためのコツを紹介します。
明度を上げて、彩度を抑える
彩度が高いグラデーションというのは難易度が高く、失敗に繋がります。
明度を上げて彩度を下げるというのは、白に近づけること、もしくは色を薄くするようなイメージです。
上の例にあるグラデーションを薄くしてみました。
どうでしょう。優しい雰囲気になり、良い感じになりました。
近い色を使う
例えば緑と赤のような反対の色(補色)を使うのは難易度が高いのでおすすめできません。
青と緑、赤とオレンジ、オレンジと黄色、紫と青など近い色を使うと綺麗になります。
後者のグラデーションの方が綺麗ですね。
質感を表現する
グラデーションを使うと、色の変化を表現できるだけではなく、質感を与えることができます。
このようなグラデーションを使うと、左上から光が当たっているように見えます。
グラデーションのCSS(linear-gradient)
CSSでグラデーションを表現するには、linear-gradientを使います。
background: linear-gradient(方向, 開始色, 終了色);
方向と開始色と終了色を記述して使います。
例1
まずは基本的な形です。
background: linear-gradient(to right, #83e4db, #6ea2e2);
to rightというのは「右方向へのグラデーション」という意味です。
degという単位を指定して使うこともできます。
background: linear-gradient(90deg, #83e4db, #6ea2e2);
このCSSは上と同じ表示になります。
例2
background: linear-gradient(方向, 開始色, 途中色, 終了色);
2色だけではなく、色を増やすこともできます。
background: linear-gradient(to right, #83e4db,#6ea2e2, #956ee2);
例3
background: linear-gradient(方向, 開始色 位置, 途中色 位置, 終了色 位置);
色が変化する位置を指定することもできます。
background: linear-gradient(to right, #83e4db 0%, #6ea2e2 90%, #956ee2 100%);
例2と同じ色を使っていますが、色が変化する位置が異なっています。
応用編
ただグラデーションにするだけではなく、位置が指定できるのを利用して柄を作ることもできます。
縞模様
位置の指定を使って、縞模様を描くこともできます。
background: linear-gradient(to right, #eee, #eee 25px,#999 25px, #999 50px, #eee 50px, #eee 75px, #999 75px, #999 100px, #eee 100px, #eee 125px, #999 125px);
しかし、これだと面倒なのでrepeating-linear-gradientを使うともっと楽になります。
background: repeating-linear-gradient(to right, #eee, #eee 5px, #999 5px, #999 10px);
もしくは、background-sizeを指定して繰り返す方法もあります。
.example {
background: repeating-linear-gradient(to right, #eee, #eee 50%, #999 50%, #999);
background-size: 10px 10px;
}
こちらも同じ柄になります。
チェック柄
linear-gradientは複数重ねることができるので、チェック柄を作ることもできます。
複数のlinear-gradientはコンマで区切って指定します。
.pattern {
background-color: #fff;
background-image: linear-gradient(90deg, rgba(243,70,78,.5) 50%, transparent 50%),
linear-gradient(rgba(243,70,78,.5) 50%, transparent 50%);
background-size: 50px 50px;
}
ブラウザの対応状況
ブラウザの対応状況は、「Can I use」というサイトで確認することができます。
以前はCSSでグラデーションを使う場合、各種ブラウザに対応するためにたくさんのが必要でしたが、今ではlinear-gradientはほとんどのブラウザが対応しています。
IE9以前は対応していませんが filterプロパティで対応させることができます。
とは言っても、IE9のシェアはかなり少なく、対応する必要性はほとんどありません。グラデーションがないからと言ってレイアウトが崩れるわけではないので、わざわざIE9に対応させる意味はないと思います。
便利なジェネレーター
わざわざ自力でCSSを書かずとも、CSSを自動で生成してくれるジェネレーターもあります。
デザインツールのように直感的に使えるので、CSSに慣れていない人でも楽に使うことができます。
Ultimate CSS Gradient Generator
まとめ
色鮮やかで美しいサイトを作るのに取り入れたいグラデーションですが、初心者だとどうしても微妙な感じになってしまがちです。
前半部分の解説を参考にして、色んな組み合わせを試してみると良いでしょう。
また、グラデーションを効果的に活用したサイトもたくさんあるので、それらの組み合わせを参考にしてみるのもいいでしょう。