CSSでグラデーション

技術情報
CSSでグラデーション

 

色が少しずつ変化して行く効果のことをグラデーションと言います。

以前は画像編集ソフトのグラデーション機能を使って実画像を制作して背景として挿入していました。

ヘッドラインやグローバルメニューのボタンの様に固定のサイズを持った用途でしたら背景画で構わないのですが、サイズが変化するサイト全体の背景をグラデーションにする場合はどうしたらよいのでしょうか。

今回は背景画を使用しない、CSSでグラデーション配色を可能にする方法のご紹介です。

いきなりですが、次の記述を行うと『ほとんどのブラウザで』実現できます。

background: linear-gradient(①グラデーション方向, ②開始色, ③中間色, ④終了色);

① グラデーション方向:グラデーションの方向を“to top”、“to bottom”、“to left”、“to right”で指定します。(複数方向や角度での指定もできますが割愛します)

② 開始色:文字通りグラデーションの開始色です。『色コード 0%』で指定します。

③ 中間色:グラデーションの中間の配色です。『色コード x%』で指定します。xは開始と終了間の位置(%)を示します。(中間色は複数設定ができます)

④ 開始色:文字通りグラデーションの終了色です。『色コード 100%』で指定します。

具体的には次の様に記述します。

<div id=”test_gradcolor”>グラデーション配色</div>
<style>
 #test_gradcolor {
  text-align: center;
  width: 100%;
  height: 2em;
  line-height: 2em;
  background: linear-gradient(to bottom, #ff0000 0%, #ffffff 50%, #00ff00 100%);
 }
</style>

グラデーション配色

 

実はこれだけでは少し不完全です。先ほど『ほとんどのブラウザで』と書いた理由です。

世の中にはたくさんのブラウザが存在します。また、それぞれのブラウザがバージョンを持っています。

先ほどご紹介したlinear-gradient()は比較的新しい記述ですから、これに対応していないブラウザやバージョンも可能な限り救いたいものです。

そこで、実際には次の様にCSSを書く方が良いです。

<div id=”test_gradcolor”>グラデーション配色</div>
<style>
 #test_gradcolor {
  text-align: center;
  width: 100%;
  height: 2em;
  line-height: 2em;
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=’#ff0000′, EndColorStr=’#00ff00′);
  background: -ms-linear-gradient(top, #ff0000 0%, #ffffff 50%, #00ff00 100%);
  background: -o-linear-gradient(top, #ff0000 0%, #ffffff 50%, #00ff00 100%);
  background: -moz-linear-gradient(top, #ff0000 0%, #ffffff 50%, #00ff00 100%);
  background: -webkit-linear-gradient(top, #ff0000 0%, #ffffff 50%, #00ff00 100%);

  background: linear-gradient(to bottom, #ff0000 0%, #ffffff 50%, #00ff00 100%);
 }
</style>

青色で追加した記述はlinear-gradientに統一される前の記述になります。①のグラデーション方向がグラデーションの開始位置になっていることにご留意ください。(“to top”、“to bottom”、“to left”、“to right”がそれぞれ“bottom”、“top”、“right”、“left”になります)

オレンジ色で追加した記述はIE9を救うためのものです。中間色が無いことにご留意ください。また、GradientTypeの0が縦方向、1が横方向になります。開始色はStartColorStr、終了色はEndColorStrで指定します。色コードに透明を表す“transparent”も使用できません。

これらの記述の順番にも意味があります。

CSSは下にある記述が優先(同指示の上書き)されますから、上位にレアな記述、最下位に最新の記述を書くと良いわけです。

※ CSSで実現されるグラデーション配色は背景画像(background-image)と同じ扱いですから背景画像を同時に使用する際には注意が必要です。(対策は次の機会にご紹介します)

 

お試しください。

 

TAテーマ001はこのグラデーション配色をブラウザから設定できます。

もちろんCSSを直接記述する必要もありません。

詳しくはこちらをご覧ください。

«
  • LINEで送る

音声ミュートを解除すると軽快な音楽が流れます (^^♪