04の01
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を使用して線形グラデーションを定義するには、次のように記述します。
線形勾配（ 角度またはサイドまたはコーナー 、 カラーストップ 、 カラーストップ ）
- まず、 linear -gradientという名前でグラデーションのタイプを定義します。
- 次に、グラデーションの開始点と終了点を、0度から359度までの直線の角度を0度として、2つの方法のいずれかで定義します。 または、左、右、下、上などの「サイドまたはコーナー」機能を使用します。 これらについては、次のページで詳しく説明します。 これらを省略すると、グラデーションは要素の上から下に流れます。
- 次に、色の停止を定義します。 カラーストップは、カラーコードとオプションのパーセンテージで定義します。 割合は、ブラウザ上でその色で開始または終了する行を指定します。 デフォルトでは、色はラインに沿って均等に配置されます。 カラーストップの詳細については、3ページを参照してください。
CSS3で上記のグラデーションを定義するには、次のように記述します。
線形勾配（左、＃999999 0％、#ffffff 100％）。
あなたが書いたDIVの背景として設定するには：
div {
背景画像：直線勾配（左、＃999999 0％、#ffffff 100％;
}
CSS3リニアグラデーションのブラウザ拡張
グラデーションをクロスブラウザで使用するには、ほとんどのブラウザでブラウザ拡張機能を使用し、Internet Explorer 9以降のフィルタ（実際には2つのフィルタ）を使用する必要があります。 これらはすべて同じ要素を使用してグラデーションを定義します（ただし、IEでは2色グラデーションのみを定義できます）。
Microsoftフィルタと拡張機能 - 異なるブラウザバージョンをサポートするには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- extensionは、CSS3プロパティのように機能し、-moz- extensionだけで動作します。 上記のFirefoxのグラデーションを取得するには、次のように記述します。
-moz-linear-gradient（左、＃999999 0％、#ffffff 100％）;
Opera拡張機能 - 拡張機能は、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が上、90degが右に、180degが下に、そして270degが左にポイントします。 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より優れていると分かっている場合は、私たちにお知らせください 。