テンプレート:Linear-gradient
このテンプレートを使って、背景にグラデーションを設定できます。 現在、Firefox (3.6以上)、Opera (11.10以上)、Safari (5.1以上)、Google Chrome (10以上)とInternet Explorer 10に対応しています。
使用法
編集style属性のCSS内で使用します。 このテンプレートはbackground-image属性を使用しています。
<div style="{{linear-gradient | start position | #color [stop], #color [stop][, #color [stop], ...] }}">Lorem ipsum...</div>
開始位置– 必須。left、top、right、bottomもしくはtop leftのような2つの組み合わせを指定します。これによって8種類の開始位置をサポートしています。色– 必須。 コンマで区切っていくつでも指定できます。位置– オプション。パーセンテージ(例:45%)やピクセル値(例:60px)を使ってそれぞれの色の位置を指定できます。
技術的情報
編集{{gradient}}とは異なりこのテンプレートはデフォルト背景色を指定しないため、グラデーションをサポートしないブラウザへの自動フォールバックを提供しません。そのため、常にこのテンプレートの前にbackground-colorを指定するようにしてください。これによってデザインの柔軟性が増し、未サポートブラウザにも対応できます。
このテンプレートは新しいCSS3の属性を使用してグラデーションを実現しています。(-moz-linear-gradient、-ms-linear-gradient、-o-linear-gradient、-webkit-linear-gradient、linear-gradient) 過去の-webkit-gradientはその独特のフォーマットのため、サポートされていません。従ってSafariバージョン5.1より前とGoogle Chromeバージョン10より前には対応していません。
例
編集<div style="{{linear-gradient|left|#ffdddd, #ddddff}}">Lorem ipsum...</div>
<div style="{{linear-gradient|left|#ffdddd, #ddffdd 50%, #ddddff}}">Lorem ipsum...</div>
<div style="{{linear-gradient|top|#ffdddd, #ddddff}}">Lorem ipsum...</div>
注意点
編集上の例では効果を分かりやすくするために対照的な色を使用しています。実用では、外見を向上させるためにも、未サポートブラウザでの表示の違いを減らす意味でも、微妙な色の組み合わせを使用ことが推奨されます。
互換性
編集- Mozilla Developer Networkのlinear-gradientですべてのブラウザでの互換性の詳細が確認できます。
関連項目
編集- {{gradient}}とはやや差異があります。
- {{radial-gradient}}
- {{border-radius}}
- {{box-shadow}}