Template:Radial-gradient

テンプレートの解説[表示] [編集] [履歴] [キャッシュを破棄]

このテンプレートは、放射状グラデーションを表示します。現在Firefox (3.6以上)、Opera (12.0以上)、Safari (5.1以上)、Google Chrome (10以上)と Internet Explorer 10が対応しています。

使用法

style属性の中のCSSで使用します。このテンプレートはCSSbackground-image属性を使用します。

<div style="{{radial-gradient | 位置 | 形 [大きさ] | #色 [stop], #色 [stop][, #色 [stop], ...] }}">Lorem ipsum...</div>

1. 位置 – 必須。 グラデーションの中心の位置をX, Yで指定します。CSSの有効な位置キーワードも使えます。
2. 形 – 必須。 グラデーションの形をサイズ値もしくはキーワードで指定します。有効なキーワード:
   • ellipse
   • circle
3. 大きさ – オプション。放射部の大きさをキーワードかサイズ値で指定します。有効なキーワード:
   • farthest-corner (もしくはcover) 放射部を最遠の要素の角へ延長します。 (グラデーションが要素をカバーすることを保証するため、デフォルト)
   • closest-corner 最も近い角まで延ばす。
   • farthest-side 最も遠い辺まで延ばす。
   • closest-side (またはcontain) 最も近い辺まで。枠線に重ならないようにする。
4. 色 – 最低2つの色が必要です。コンマで区切っていくつでも指定できます。
5. stop – オプション。 パーセンテージ(例:45%)やピクセル値(例:60px)を使ってそれぞれの色の位置を指定できます。

^注 1: Firefoxはまだ具体的な値をサポートせず、キーワードだけをサポートします。

技術的情報

→「Template:Linear-gradient」も参照

このテンプレートは新しいCSS3の属性を使用してグラデーションを実現しています。(-moz-radial-gradient、-ms-radial-gradient、-o-radial-gradient、-webkit-radial-gradient、radial-gradient)

例

• <div style="{{radial-gradient|100px center|ellipse cover|#ffdddd, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• <div style="{{radial-gradient|center|ellipse contain|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

• <div style="{{radial-gradient|top|circle|#ffdddd, #ddddff}}">Lorem ipsum...</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

関連項目

• {{linear-gradient}}
• {{border-radius}}
• {{box-shadow}}

この解説は、Template:Radial-gradient/docから呼び出されています。 (編集 | 履歴)
編集者は、このテンプレートをサンドボックス (作成 | 複製)とテストケース (作成)で試すことができます。（解説）
/docのサブページにカテゴリを追加してください。 このテンプレートのサブページ一覧。