CSS3でクロスブラウザの線形グラデーションを作成する
直線勾配
最も一般的なグラデーションの種類は、2つの色の線形グラデーションです。これは、勾配が、その線に沿って徐々に第1の色から第2の色に変化する直線上を移動することを意味する。このページの画像は＃999（濃い灰色）から#fff（白）までの単純な左から右への勾配を示しています。
リニアグラデーションは最も簡単に定義でき、ブラウザで最もサポートされます。 CSS3直線勾配は、Android 2.3以降、Chrome 1+、Firefox 3.6+、Opera 11.1+、Safari 4+でサポートされています。 Internet Explorerでは、 フィルタ それらをIE 5.5に戻してサポートします。これはCSS3ではなく、ブラウザ間の互換性のためのオプションです。
グラデーションを定義するときには、いくつかの異なるものを定義する必要があります。
- どのような種類の勾配ですか？
リニアまたはラジアル - グラデーションを開始する場所
- グラジエントを停止する場所
- どの色がグラデーション内にあり、どこで開始して停止するべきか
CSS3を使用して線形グラデーションを定義するには、次のように記述します。
線形勾配（角度 または 側面または角, カラーストップ, カラーストップ)
- まず、グラデーションのタイプを名前で定義します
リニア -勾配. - 次に、グラデーションの開始点と終了点を2つの方法のいずれかで定義します。
角度0度から359度までの直線の0度が真上を指しています。または、「サイドまたはコーナー」機能（たとえば、左,右,底、および上。これらについては、次のページで詳しく説明します。これらを省略すると、グラデーションは要素の上から下に流れます。 - 次に、色の停止を定義します。カラーストップは、カラーコードとオプションのパーセンテージで定義します。割合は、ブラウザ上でその色で開始または終了する行を指定します。デフォルトでは、色はラインに沿って均等に配置されます。カラーストップの詳細については、3ページを参照してください。
CSS3で上記のグラデーションを定義するには、次のように記述します。
線形勾配（左、＃999999 0％、#ffffff 100％）。
それを背景として設定する DIV あなたが書く：
div {背景画像：直線勾配（左、＃999999 0％、#ffffff 100％;} CSS3リニアグラデーションのブラウザ拡張
グラデーションをクロスブラウザで使用するには、ほとんどのブラウザでブラウザ拡張を使用する必要があります。 フィルタ Internet Explorer 9およびそれ以前のバージョン（実際には2つのフィルタ）。これらはすべて同じ要素を使用してグラデーションを定義します（ただし、IEでは2色グラデーションのみを定義できます）。
Microsoftフィルタと拡張機能-Internet Explorerは、異なるブラウザのバージョンをサポートするために3つの異なる行が必要なため、サポートするのが最も難しいです。上のグレーから白のグラデーションを得るには、次のように記述します。
/ * IE 5.5-7 * /フィルタ：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃999999'、endColorstr = '＃ffffff'、GradientType = 1）;/ * IE 8-9 * /-ms-filter： "progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃999999'、endColorstr = '＃ffffff'、GradientType = 1）;/ * IE 10 * /-ms-linear-gradient（左、＃999999 0％、#ffffff 100％）;
Mozilla Extension - -moz- 拡張機能はCSS3プロパティのように機能します。 -moz- 拡張。上記のFirefoxのグラデーションを取得するには、次のように記述します。
-moz-linear-gradient（左、＃999999 0％、#ffffff 100％）;
Opera拡張機能 - -o- 拡張機能はOpera 11.1+にグラデーションを追加します。上記のグラデーションを得るには、次のように記述します。
-o線形勾配（左、＃999999 0％、#ffffff 100％）。
Webkit Extension - -webkit- 拡張機能はCSS3のプロパティとよく似ています。 Safari 5.1以上またはChrome 10以上で上記のグラデーションを定義するには、次のように記述します。
-webkit-linear-gradient（左、＃999999 0％、#ffffff 100％）;
Chrome 2+やSafari 4+で動作する旧バージョンのWebkit拡張もあります。これでは、プロパティ名ではなく、値としてグラデーションのタイプを定義します。この拡張子を持つ灰色から白のグラデーションを取得するには、次のように記述します。
-webkit-gradient（線形、左上、右上、カラーストップ（0％、＃999999）、カラーストップ（100％、＃ffffff））; フルCSS3リニアグラデーションCSSコード
上のグレーから白へのグラデーションを完全にサポートするブラウザをサポートするには、グラデーションをサポートしていないブラウザの場合は代替色を最初に含め、最後のアイテムの場合は完全に適合するブラウザのCSS3スタイルを使用する必要があります。だから、あなたは次のように書く：
背景：＃999999;背景：-moz-linear-gradient（左、＃999999 0％、#ffffff 100％）;背景：-webkit-gradient（線形、左上、右上、カラーストップ（0％、＃999999）、カラーストップ（100％、＃ffffff））;背景：-webkit-linear-gradient（左、＃999999 0％、#ffffff 100％）;背景：-o-linear-gradient（左、＃999999 0％、#ffffff 100％）;背景：-ms-linear-gradient（左、＃999999 0％、#ffffff 100％）;フィルタ：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃999999'、endColorstr = '＃ffffff'、GradientType = 1）;-ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃999999'、endColorstr = '＃ffffff'、GradientType = 1）;背景：直線勾配（左、＃999999 0％、#ffffff 100％）。
このチュートリアルの次のページでは、グラデーションの部分について詳細に説明し、最後のページでは、自動的にCSS3グラデーションを作成するための優れた方法を示しています。
実際にCSSを使用してこの線形グラデーションを参照してください。
04の02対角線グラデーションの作成 - グラディエントの角度
開始点と終了点によってグラデーションの角度が決まります。ほとんどの直線勾配は、上から下、または左から右です。しかし、対角線上を移動するグラデーションを構築することは可能です。このページの画像は、画像を右から左に45度の角度で移動する単純なグラデーションを示しています。
勾配線を定義する角度
角度は、要素の中心にある仮想円の線です。 0deg ポイントアップ、 90度 右を指し、 180度 ポイントダウン、 270度 左を指します。 0〜359度の任意の角度を定義できます。
正方形では、45度の角度が左上隅から右下に移動しますが、四角形では、画像でわかるように、開始点と終了点が少し外になります。
対角勾配を定義するより一般的な方法は、次のようなコーナーを定義することです。 右上 グラデーションはそのコーナーから反対側のコーナーに移動します。次のキーワードを使用して開始位置を定義できます。
- 上
- 右
- 底
- 左
- センター
そしてそれらはより具体的に結合することができます：
- 右上
- 左上
- トップセンター
- 右下
- 左下の
- ボトムセンター
- 右中央
- 左中央
ここでは、右上の隅から左下に向かって赤から白へ変化するグラデーションのCSSが描かれています。
背景：## 901A1C;背景画像：-moz-linear-gradient（右上、＃901A1C 0％、＃FFFFFF 100％）;background-image：-webkit-gradient（線形、右上、左下、カラーストップ（0、＃901A1C）、カラーストップ（1、#FFFFFF））;背景：-webkit-linear-gradient（右上、＃901A1C 0％、#ffffff 100％）;背景：-o線形グラジエント（右上、＃901A1C 0％、#ffffff 100％）。背景：-ms-linear-gradient（右上、＃901A1C 0％、#ffffff 100％）;背景：直線勾配（右上、＃901A1C 0％、#ffffff 100％）。
この例では、IEフィルターがないことに気付いたことがあります。これは、IEでは2つのタイプのフィルタのみが許可されているからです。上から下（デフォルト）と左から右（ GradientType = 1 スイッチ）。
CSSを使用してこの対角線の線形グラデーションを実際に見てみましょう。
04の03カラーストップ
CSS3の線形グラデーションを使用すると、グラデーションに複数の色を追加して、より美しいエフェクトを作成することができます。これらの色を追加するには、コンマで区切ってプロパティの最後に色を追加します。色の始まりと終わりの位置をライン上に含める必要があります。
Internet Explorerフィルタは2つのカラーストップのみをサポートしているので、このグラデーションを作成するときは、表示する最初の色と2番目の色のみを含める必要があります。
上記の3色グラデーションのCSSは次のとおりです。
背景：#ffffff;背景：-moz-linear-gradient（左、#ffffff 0％、＃901A1C 51％、#ffffff 100％）;背景：-webkit-gradient（線形、左上、右上、カラーストップ（0％、＃ffffff）、カラーストップ（51％、＃901A1C）、カラーストップ（100％、＃ffffff）背景：-webkit-linear-gradient（左、#ffffff 0％、＃901A1C 51％、＃ffffff 100％）;背景：-o線形勾配（左、#ffffff 0％、＃901A1C 51％、＃ffffff 100％）。背景：-ms-linear-gradient（左、#ffffff 0％、＃901A1C 51％、＃ffffff 100％）。フィルタ：progid：DXImageTransform.Microsoft.gradient（startColorstr = '＃ffffff'、endColorstr = '＃ffffff'、GradientType = 1）;背景：直線勾配（左、#ffffff 0％、＃901A1C 51％、＃ffffff 100％）。
この線形グラデーションでは、CSSだけで3つのカラーストップが動作します。
04/04ビルグラデーションをより簡単にする
グラデーションを構築するのに役立つ2つのサイトがあり、それぞれに利点と欠点があります。まだすべてを行うグラデーションビルダーは見つかりませんでした。
究極のCSSグラジエントジェネレータこのグラジェントジェネレータは、Photoshopなどのプログラムでグラデーションビルダーと同様の方法で実行されるため、非常に人気があります。また、WebkitやMozillaだけでなく、すべてのCSS拡張機能を提供しているので、私も好きです。このジェネレーターの問題点は、水平および垂直グラデーションのみをサポートしていることです。斜めのグラデーションを行う場合は、私が推奨する他のジェネレータに移動する必要があります。 CSS3グラデーションジェネレータこのジェネレータは、最初のものよりも少しわかりましたが、方向を斜めに変更することをサポートしています。 あなたが他のCSS Gradient Generatorより優れていると分かっている場合は、私たちにお知らせください。
