Revision 236707 of radial-gradient

  • リビジョンの URL スラグ: CSS/-moz-radial-gradient
  • リビジョンのタイトル: -moz-radial-gradient
  • リビジョンの ID: 236707
  • 作成日:
  • 作成者: Level
  • 現行リビジョン いいえ
  • コメント syntaxの変更に対応; 256 words added, 258 words removed

このリビジョンの内容

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}

gradient は2個以上の指定された色の間のなめらかな変化です。CSS gradients を使用すると、画像を置き換えてダウンロード時間を削減したり、より柔軟なレイアウトが可能になったり、ズームした時の見栄えが良くなります。 Mozilla (Firefox) は2種類の CSS gradients:linear と radial をサポートします。

Mozilla は現在、CSS gradients を {{ Cssxref("background-image") }} および {{ Cssxref("background") }} プロパティの値としてのみサポートします。画像の URL の代わりに gradient を記載します。

-moz-radial-gradient プロパティは gradient の繰り返しを許可していません。この機能に関しては {{ Cssxref("-moz-repeating-radial-gradient") }} を参照してください。

Syntax

-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]* )

Values

<position>
{{ Cssxref("background-position") }} や {{ Cssxref("-moz-transform-origin") }} と同じように扱われる位置。
<angle>
gradient を決定する角度です。開始点からこの角度に向かって拡大します。デフォルト値は 0deg
<shape>
gradient の形状です。circle (gradient の形状は一定の半径の円)または ellipse(形状は軸に沿った楕円)のいずれかを指定します。デフォルト値は ellipse
<size>
gradient のサイズです。以下に示す {{ anch("Size constants") }} の中のひとつです。
<stop>
この値は {{ Xref_csscolorvalue() }} 値、続いて省略可能な停止位置(0% から 100% までの割合、または gradient 軸に沿った  {{ Xref_csslength() }})で構成されます。
CSS gradients の color-stop の描画は SVG gradients の color-stop と同じ規則に従います。

Size constants

Constant Description
closest-side
gradient の形状は、その中心から最も近い box の辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。
closest-corner gradient の形状は、その中心から最も近い box の頂点に接します。
farthest-side 形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。
farthest-corner
gradient の形状は、その中心から最も遠い box の頂点に接します。
contain
closest-side の別名です。
cover
farthest-corner の別名です。

Usage

radial gradient は軸(axis)に対して適用されます。軸の各終点に対してひとつの radius が定義されます。これは二つの "円" が生成され、それぞれの円の中心が point で定義され、半径が radius length で定義されるものとしてイメージできます。gradient は内側の円の円周から外側の円の円周に向かって外向きに生成されます。

 
background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);

Gecko/Firefox において CSS gradients がどのように動作するかのより一般的な解説は {{ cssxref("-moz-linear-gradient") }} を参照してください。

 
background: -moz-radial-gradient(45px 45px 45deg, circle cover,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
 
background: -moz-radial-gradient(45px 45px, ellipse farthest-corner,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
            no-repeat;
Radial
background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);

ブラウザ互換性

ブラウザ Lowest version Support of
Internet Explorer 5.5 (including 8.0) filter: progid:DXImageTransform.Microsoft.Gradient()
MSDN library, gradient filter
Firefox (Gecko) 3.6 (1.9.2) -moz-radial-gradient()
Opera --- ---
Safari (WebKit) 4.0 (528) -webkit-gradient(radial,)
Safari Reference Library, gradients

我々の CSS gradients の syntax の提案は WebKit の提案とは大きく異なることに注意してください:

  • Gecko (Firefox) は radial と linear gradient を区別するために異なるプロパティ値を使用していますが、WebKit は一つのプロパティ値にまとめているので gradient の種類を識別するためにパラメータを必要とします。
  • gradient を定義するシンタックスが大きく異なります。

参照

{{ languages( { "en": "en/CSS/-moz-radial-gradient"} ) }}

このリビジョンのソースコード

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("1.9.2") }}</p>
<p>gradient は2個以上の指定された色の間のなめらかな変化です。CSS gradients を使用すると、画像を置き換えてダウンロード時間を削減したり、より柔軟なレイアウトが可能になったり、ズームした時の見栄えが良くなります。 Mozilla (Firefox) は2種類の CSS gradients:linear と radial をサポートします。</p>
<p>Mozilla は現在、CSS gradients を {{ Cssxref("background-image") }} および {{ Cssxref("background") }} プロパティの値としてのみサポートします。画像の URL の代わりに gradient を記載します。</p>
<p><code>-moz-radial-gradient</code> プロパティは gradient の繰り返しを許可していません。この機能に関しては {{ Cssxref("-moz-repeating-radial-gradient") }} を参照してください。</p>
<h2>Syntax</h2>
<pre>-moz-radial-gradient( [&lt;position&gt; || &lt;angle&gt;,]? [&lt;shape&gt; || &lt;size&gt;,]? &lt;stop&gt;, &lt;stop&gt;[, &lt;stop&gt;]* )</pre>
<h2>Values</h2>
<dl> <dt>&lt;position&gt;</dt> <dd>{{ Cssxref("background-position") }} や {{ Cssxref("-moz-transform-origin") }} と同じように扱われる位置。</dd> <dt>&lt;angle&gt;</dt> <dd>gradient を決定する角度です。開始点からこの角度に向かって拡大します。デフォルト値は <code>0deg</code>。</dd> <dt>&lt;shape&gt;</dt> <dd>gradient の形状です。<code>circle</code> (gradient の形状は一定の半径の円)または <code>ellipse</code>(形状は軸に沿った楕円)のいずれかを指定します。デフォルト値は <code>ellipse</code>。</dd> <dt>&lt;size&gt;</dt> <dd>gradient のサイズです。以下に示す {{ anch("Size constants") }} の中のひとつです。</dd> <dt>&lt;stop&gt;</dt> <dd>この値は {{ Xref_csscolorvalue() }} 値、続いて省略可能な停止位置(0% から 100% までの割合、または gradient 軸に沿った  {{ Xref_csslength() }})で構成されます。</dd> <dd>CSS gradients の color-stop の描画は SVG gradients の color-stop と同じ規則に従います。</dd>
</dl>
<h2>Size constants</h2>
<table class="standard-table"> <tbody> <tr> <th>Constant</th> <th>Description</th> </tr> <tr> <td><code>closest-side<br> </code></td> <td>gradient の形状は、その中心から最も近い box の辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。</td> </tr> <tr> <td><code>closest-corner</code></td> <td>gradient の形状は、その中心から最も近い box の頂点に接します。</td> </tr> <tr> <td><code>farthest-side</code></td> <td>形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。</td> </tr> <tr> <td><code>farthest-corner<br> </code></td> <td>gradient の形状は、その中心から最も遠い box の頂点に接します。</td> </tr> <tr> <td><code>contain<br> </code></td> <td><code>closest-side</code> の別名です。</td> </tr> <tr> <td><code>cover<br> </code></td> <td><code>farthest-corner</code> の別名です。</td> </tr> </tbody>
</table>
<h2>Usage</h2>
<p>radial gradient は軸(axis)に対して適用されます。軸の各終点に対してひとつの radius が定義されます。これは二つの "円" が生成され、それぞれの円の中心が point で定義され、半径が radius length で定義されるものとしてイメージできます。gradient は内側の円の円周から外側の円の円周に向かって外向きに生成されます。</p>
<div style="background-image: -moz-radial-gradient(center center 45deg, circle closest-side, orange 0%, red 100%); width: 160px; height: 140px; border: 1px solid black;"> </div>
<pre>background-image: -moz-radial-gradient(center 45deg, circle closest-side, orange 0%, red 100%);</pre>
<h2>例</h2>
<p>Gecko/Firefox において CSS gradients がどのように動作するかのより一般的な解説は {{ cssxref("-moz-linear-gradient") }} を参照してください。</p>
<div style="height: 170px; background: -moz-radial-gradient(45px 45px 45deg, circle farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%) repeat scroll 0% 0% transparent; border: 1px solid black;"> </div>
<pre>background: -moz-radial-gradient(45px 45px 45deg, circle cover,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);</pre>
<div style="height: 170px; background: -moz-radial-gradient(45px 45px , ellipse farthest-corner, aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%) no-repeat scroll 0% 0% transparent; border: 1px solid black;"> </div>
<pre>background: -moz-radial-gradient(45px 45px, ellipse farthest-corner,
				 aqua 0%, rgba(0, 0, 255, 0) 100%, blue 95%);
            no-repeat;
</pre>
<div style="background: -moz-radial-gradient(45px 45px , farthest-corner, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%) repeat scroll 0% 0% transparent; text-shadow: 1px 1px 0pt black; color: white; border: 1px solid black;">Radial</div>
<pre>background: -moz-radial-gradient(45px 45px, cover, rgb(255, 0, 0) 0%, rgb(0, 0, 255) 100%);
</pre>
<h2>ブラウザ互換性</h2>
<table class="standard-table"> <tbody> <tr> <th>ブラウザ</th> <th>Lowest version</th> <th>Support of</th> </tr> <tr> <td>Internet Explorer</td> <td>5.5 (including 8.0)</td> <td><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code><br> <a class="external" href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx" title="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx">MSDN library, gradient filter</a></td> </tr> <tr> <td>Firefox (Gecko)</td> <td>3.6 (1.9.2)</td> <td><code>-moz-radial-gradient()</code></td> </tr> <tr> <td>Opera</td> <td>---</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>4.0 (528)</td> <td><code>-webkit-gradient(radial,</code><code>…</code><code>)</code><br> <a class="external" href="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html" title="http://developer.apple.com/safari/library/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradients.html">Safari Reference Library, gradients</a></td> </tr> </tbody>
</table>
<p>我々の CSS gradients の syntax の提案は WebKit の提案とは大きく異なることに注意してください:</p>
<ul> <li>Gecko (Firefox) は radial と linear gradient を区別するために異なるプロパティ値を使用していますが、WebKit は一つのプロパティ値にまとめているので gradient の種類を識別するためにパラメータを必要とします。</li> <li>gradient を定義するシンタックスが大きく異なります。</li>
</ul>
<h2>参照</h2>
<ul> <li>{{ cssxref("-moz-linear-gradient") }}</li> <li>{{ cssxref("background-image") }}</li> <li>{{ Cssxref("background") }}</li> <li>WebKit's original proposal: <a class="external" href="http://webkit.org/blog/175/introducing-css-gradients/" title="http://webkit.org/blog/175/introducing-css-gradients/">http://webkit.org/blog/175/introducing-css-gradients/</a></li> <li>Bug: {{ bug("479220") }}</li> <li>W3C Proposal for Radial Gradients: <a class=" external" href="http://dev.w3.org/csswg/css3-images/#radial-gradients" title="http://dev.w3.org/csswg/css3-images/#radial-gradients">http://dev.w3.org/csswg/css3-images/#radial-gradients</a></li> <li>W3C Proposal for Background Position: <a class=" external" href="http://www.w3.org/TR/css3-background/#the-background-position" title="http://www.w3.org/TR/css3-background/#the-background-position">http://www.w3.org/TR/css3-background/#the-background-position</a></li>
</ul>
<p>{{ languages( { "en": "en/CSS/-moz-radial-gradient"} ) }}</p>
このリビジョンへ戻す