web codery

【CSS】gradientの書き方いろいろ

category: HTML/CSS

今回は、CSS3で追加されたgradientの書き方についてです。といっても、現在gradientは背景にしか指定できないので、backgroundへの指定で説明します。その後でブラウザの対応状況や、gradientの仕様についても簡単に触れておきます。

目次

  1. linear-gradient
  2. radial-gradient
  3. gradientについて少し詳しく

linear-gradient

基本的な書き方

/* -webkit-gradient(linear, 開始位置, 終了位置, from(開始色), to(終了色) */
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#333333));

/* linear-gradient(to 終了位置, 開始色, 終了色) */
background: linear-gradient(to bottom, #f0f0f0, #333333);
 

Andraid, iOSに対応するためには、今のところwebkitのベンダープレフィックス付き書式を一緒に書いておく必要があります。また、ベンダープレフィックス付きと標準の書式では書き方が違い、-webkit-の位置指定には縦横両方の指定が必要なところにも注意が必要です。色指定にはRGBAで半透明色を指定することも可能です。

途中の色を指定する

/* -webkit-gradient(linear, 開始位置, 終了位置, from(開始色), color-stop(位置, 途中色), to(終了色) */
background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), color-stop(30%, #dddddd), to(#333333));

/* linear-gradient(to 終了位置, 開始色, 途中色 位置, 終了色) */
background: linear-gradient(to bottom, #f0f0f0, #dddddd 30%, #333333);
 

ベンダープレフィックスなしの標準書式の場合は、途中位置をpxでも指定することできます。-webkit-ではpx指定はできないようです。

斜めにグラデーションさせる

/* left topからright bottom方向 */
background: -webkit-gradient(linear, left top, right bottom, from(#f0f0f0),  to(#333333));
background: linear-gradient(to right bottom, #f0f0f0, #dddddd 20%, #333333);
 

標準書式の場合は、角度で指定することもできます。

/* 45度右上へ */
background: linear-gradient(45deg, #f0f0f0, #dddddd 20%, #333333);
 

角度で指定する場合、0度で下から上へのグラデーションになり、角度をつけた分だけ始点が時計回りに回っていきます。90度では左から右へのグラデーションになります。-webkit-では、「left top」などで指定していた開始位置, 終了位置をボックスの左上からの座標で指定できるので、開始位置, 終了位置を計算して指定すれば同じように角度を細かく調整することはできます。

/* 45度右上へ */
background: -webkit-gradient(linear, 0 100, 100 0, from(#f0f0f0), to(#333333));

radial-gradient

円形グラデーションの書き方はいっぺんに説明してしまいます。
開始・終了色以外は省略可能なので、下では[]を付けています。

/* radial-gradient([開始位置] [角度], [形状] [サイズ], 開始色, [途中色 位置], 終了色); */
background: -moz-radial-gradient(left center 0deg, ellipse farthest-side, #f0f0f0, #999999 50px, #333333);
background: -webkit-radial-gradient(left center, ellipse farthest-side, #f0f0f0, #999999 50px, #333333);
background: -ms-radial-gradient(left center, ellipse farthest-side, #f0f0f0, #999999 50px, #333333);
background: -o-radial-gradient(left center, ellipse farthest-side, #f0f0f0, #999999 50px, #333333;
background: radial-gradient(left center 0deg, ellipse farthest-side, #f0f0f0, #999999 50px, #333333);
 
<開始位置>
初期値はcenter。
その他、left, right, top, bottomキーワード、ボックス左上からのpx, %の数値で指定できます。
<角度>
初期値は0deg。
位置をpxで指定した場合の角度。0度で上向き、90度で横向き。今のところ、firefox以外のブラウザは対応していないようです。
<形状>
初期値はellipse。
  • ellipse ⇒ 楕円
  • circle ⇒ 正円
<サイズ>
初期値はfarthest-corner。
  • farthest-corner ⇒ 中心から最も遠い角に合わせる
  • farthest-side ⇒ 中心から最も遠い辺に合わせる
  • closest-corner ⇒ 中心から最も近い角に合わせる
  • closest-side ⇒ 中心から最も近い辺に合わせる
<途中色の位置>
中心からの距離をpx, %で指定できます。

サイズが分かりにくいと思いますが、形状にellipseを指定した場合に、closestを指定すると縦横それぞれで近い位置に合わせるようになります。farthestを指定すると遠い方の距離で正円系にグラデーションが変化していきます。

gradientについて少し詳しく

各ブラウザの対応状況

linear-gradientは、4.3以下のAndraid 標準ブラウザ, 6.1以下のiOS Safariでベンダープレフィックスが必要なので、スマホ・タブレットに対応する場合は-webkit-を付けた指定も書いておく必要があります。
radial-gradientは、主要なブラウザでも今のところベンダープレフィックスが必要です。スマホでは、Android4 標準ブラウザ, iOS5 Safariからサポートされています。

そもそもgradientとは何なのか

gradientは画像オブジェクトをCSSで作り出すための関数です。CSS中で画像を指定できるところに使うことができるということになっているようですが、現在はbackground-imageへの指定のみがサポートされています。このページに書いていたbackgroundへの指定は、background-colorではなくbackground-imageへの指定です。

transitionさせることができない

画像オブジェクトなので当然transitionでゆっくり変化させることはできません。同じような効果を出したい場合は、RGBAで半透明色にしたgradientと背景色を重ねて指定して、背景色をtransitionで変化させる方法があります。詳しくはグラデーションのかかった背景をCSSでふわっと変える方法を参照してみてください。

以上、gradientで線形・円形グラデーションを指定する方法でした。

管理人にメッセージを送る





ページトップ