グラデーションの利用

目次

  1. 1. 線形グラデーション
    1. 1.1. 単純な線形グラデーション
    2. 1.2. 角度の指定
    3. 1.3. カラーストップ
      1. 1.3.1. 例:3つのカラーストップ
      2. 1.3.2. 例: 等間隔のカラーストップ
    4. 1.4. 透明度とグラデーション
  2. 2. 放射状グラデーション
    1. 2.1. カラーストップ
      1. 2.1.1. 例: 等間隔のカラーストップ
      2. 2.1.2. 例: 個別に間隔を指定したカラーストップ
    2. 2.2. サイズ
      1. 2.2.1. 例: 楕円のclosest-side指定
      2. 2.2.2. 例: 楕円のfarthest-corner指定
      3. 2.2.3. 例: 円のclosest-side指定
  3. 3. グラデーションの繰り返し
    1. 3.1. 例: 線形グラデーションの繰り返し
    2. 3.2. 例: 放射状グラデーションの繰り返し
  4. 4. 関連記事
ページ通知 オフ

Gecko 1.9.2 で導入

(Firefox 3.6 / Thunderbird 3.1 / Fennec 1.0)

Firefox 3.6に使用されているGecko 1.9.2は、CSS  background におけるグラデーションの指定に対応しています。背景にCSSグラデーションを使うことによって、指定された2つまたはそれ以上の色の間をスムースに変化させて表示することができます。これによって、こういった効果のために画像を使う必要がなくなり、その結果、消費する帯域幅やダウンロードに要する時間を減らすことができます。また、グラデーションはブラウザによって生成されるため、グラデーションを含んだオブジェクトはズーム表示されたときにも綺麗に表示されますし、レイアウトをより柔軟に適応させることができます。

Geckoは線形（ -moz-linear-gradient ）および放射状（ -moz-radial-gradient ）の2種類のグラデーションに対応しています。

線形グラデーション

線形グラデーションを生成するには、グラデーション効果を適用する箇所に従って開始点と方向（角度によって指定します）を指定します。この時、カラーストップを指定することもできます。カラーストップとは、それらの間で色をスムースに変化させてGeckoに描画させたい複数の色のことで、最低でも2つは指定しなければなりませんが、より複雑なグラデーション効果を生成するためにさらに多数指定することもできます。

単純な線形グラデーション

以下は、中央（水平方向）の上端（垂直方向）から始まり、青から白へ変化する線形グラデーションです。

スクリーンショット ライブデモ
 
 
background: -moz-linear-gradient(top, blue,white);

同じグラデーションを左から右へ走るように変更した物が以下です：

スクリーンショット ライブデモ
basic_linear_blueleft.png
 
 
background: -moz-linear-gradient(left, blue, white);

開始点について水平方向と垂直方向の両方の位置を指定することで、グラデーションを斜めに走らせることもできます。例：

スクリーンショット ライブデモ
basic_linear_bluetopleft.png
 
 
background: -moz-linear-gradient(left top, blue, white);

角度の指定

角度を指定しなかった場合、角度は開始点に基づいて自動的に判断されます。グラデーションの角度をより細かく制御したい場合は、角度を具体的に指定することもできます。

例えば、以下の2つのグラデーションの開始点はどちらも同じく「left center」ですが、2つ目は20度という角度が指定されています。

linear_gradient_angle.png

右側は以下のようなCSSの指定になります：

background: -moz-linear-gradient(left 20deg, black, white);

角度は水平線からグラデーションの線との間の角度を反時計回りで指定します。言い換えると、0度は左から右へのグラデーションとなり、90度は下から上に向かう縦方向のグラデーションを生成します：

linear_redangles.png

background: -moz-linear-gradient(<angle>, red, white);

カラーストップ

カラーストップは、その位置において指定された色を持つことになる、グラデーションの線上の点です。カラーストップの位置はグラデーションの線の長さに対するパーセンテージか、もしくは長さの絶対値で指定することができます。あなたは望み通りの効果を発揮させるために、好きなだけ多くのカラーストップを指定できます。

場所をパーセンテージで指定する場合、0%は開始点となり、100%は終了点となります。しかしながら、 必要なのであれば、あなたは欲しい効果を得るために、この範囲外の値も使えます。

例:3つのカラーストップ

この例では3つのカラーストップを指定しています：

スクリーンショット ライブデモ
linear_colorstops1.png
 
 
background: -moz-linear-gradient(top, blue, white 80%, orange);

最初と最後のカラーストップの位置が指定されていないことに注意して下さい。これは、0%と100%の値が自動的に割り当てられるためです。中央のカラーストップは、下寄りの位置に置くために場所を80％に指定しています。

例: 等間隔のカラーストップ

以下は、様々な種類の色を等間隔で使用する例です：

スクリーンショット ライブデモ
linear_rainbow.png
 
 
background: -moz-linear-gradient(left, red, orange, yellow, green, blue);

場所が指定されていない場合、カラーストップは自動的に等間隔に配置されることに注意して下さい。

透明度とグラデーション

グラデーションは透明度の指定にも対応しています。これは例えば、複数の背景を重ねた時に背景画像に対するフェード効果を生成するために使う事ができます。例：

linear_multibg_transparent.png

background: -moz-linear-gradient(right, rgba(255,255,255,0), rgba(255,255,255,1)), url(http://foo.com/image.jpg);

複数の背景は最初に指定された背景が一番上に、その後に指定された物が順番に重ねられます。この方法で複数の背景を重ねることによって、前出の例のような非常にクリエイティブな効果を作る事ができます。

放射状グラデーション

放射状グラデーションは -moz-radial-gradient プロパティによって指定します。グラデーションの形状（円または楕円のどちらかになります）とサイズを指定できる点以外は、構文は線形グラデーションの物に似ています。

カラーストップ

線形グラデーションの場合と同じやり方でカラーストップを指定できます。グラデーションの線は開始点からすべての方向に向かって広がっていくことになります。

例: 等間隔のカラーストップ

初期状態では、線形グラデーションと同様に、カラーストップは等間隔に配置されます：

スクリーンショット ライブデモ
radial_gradient_even.png
 
 
background: -moz-radial-gradient(red, yellow, rgb(30, 144, 255));

例: 個別に間隔を指定したカラーストップ

以下はそれぞれのカラーストップに特定の位置を指定したものです：

スクリーンショット ライブデモ
radial_gradient_varied.png
 
 
background: -moz-radial-gradient(red 5%, yellow 25%, #1E90FF 50%);

サイズ

これは、放射状グラデーションが線形グラデーションから異なっている箇所の1つです。あなたは、円または楕円の大きさを定義する点を指定するサイズ値を指定することができます。詳細はサイズ定数の説明を参照して下さい。

例: 楕円のclosest-side指定

この楕円はサイズ値としてclosest-sideを使用しています。これは、ボックスを楕円に外接する長方形と見なして、開始点（中央）からボックスの最も近い辺までの距離をグラデーションのサイズとする事を意味します。

スクリーンショット ライブデモ
radial_ellipse_size1.png
 
 
background: -moz-radial-gradient(ellipse closest-side, red, yellow 10%, #1E90FF 50%, white);

例: 楕円のfarthest-corner指定

この例はサイズがfarthest-cornerと指定されている点を除いて、1つ前の物に似ています。これは、ボックスを楕円に内接する長方形と見なして、開始点から楕円に内接するボックスの最も遠い角までの距離をグラデーションのサイズとするものです。

スクリーンショット ライブデモ
radial_ellipse_size2.png
 
 
background: -moz-radial-gradient(ellipse farthest-corner, red, yellow 10%, #1E90FF 50%, white);

例: 円のclosest-side指定

この例はclosest-sideを使用しており、円の大きさを開始点（中央）から最も近い辺までの間の距離として識別します。

スクリーンショット ライブデモ
radial_circle_size1.png
 
 
background: -moz-radial-gradient(circle closest-side, red, yellow 10%, #1E90FF 50%, white);

ここでは、上下の辺が開始点から等しい距離にあり、左右の辺よりも近いため、円の半径はボックスの高さの半分となっています。

グラデーションの繰り返し

-moz-linear-gradient プロパティと -moz-radial-gradient プロパティはカラーストップの自動的な繰り返しに対応していません。しかしながら、このような機能を実現するために、 -moz-repeating-linear-gradient プロパティと -moz-repeating-radial-gradient プロパティが利用できます。

例: 線形グラデーションの繰り返し

この例はグラデーションの生成に -moz-repeating-linear-gradient を使用しています：

スクリーンショット ライブデモ
repeating_linear_gradient.png
 
 
background: -moz-repeating-linear-gradient(top left -45deg, red, red 5px, white 5px, white 10px);

例: 放射状グラデーションの繰り返し

この例はグラデーションの生成に -moz-repeating-radial-gradient を使用しています：

スクリーンショット ライブデモ
repeating_radial_gradient.png
 
 
background: -moz-repeating-radial-gradient(black, black 5px, white 5px, white 10px);

Tags (0)

Attachments (0)

 

添付ファイル