CSS3グラデーション
CSS3グラデーション（グラデーション）を使用すると、指定された2つ以上の色の間のスムーズな移行を表示することができます。
以前は、これらの効果を達成するために画像を使用する必要があります。 しかし、CSS3勾配（勾配）を使用して、ダウンロードのイベントやブロードバンドの使用を減らすことができます。 あなたが拡大するとの勾配（勾配）は、ブラウザによって生成されるため、また、トランジション効果の要素は、よく見えます。
CSS3グラデーション（グラデーション）の2つのタイプを定義します。
- 直線勾配（リニアグラデーション） -上/下/左/右/斜め方向
- 放射状グラデーション（ラジアルグラデーション） -彼らの中心で定義されました
ブラウザのサポート
表属性内の数字は、ブラウザの最初のバージョンのフルサポートを指定します。
-webkitとの背後にある - 、 - MOZ融合物または-O-が最初のバージョンをサポートするためのprefix属性を持つ必要数を指定します。
| 属性 | |||||
|---|---|---|---|---|---|
| linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 10.0 | 26.0 10.0 -webkit- |
16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3直線勾配
線形グラデーションを作成するには、少なくとも2色のノードを定義する必要があります。 あなたはスムーズな移行を表示したい色を表すColorノード。 同時に、あなたはまた、出発点と方向（または角度）を設定することができます。
直線勾配の例：
文法
直線勾配-上から下に（デフォルトで）
次の例では、上から直線勾配を示しています。 出発点は赤で、ゆっくりと青に移行します：
例
上から下まで直線勾配：
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法 */
}
»をお試しください
直線勾配-左から右へ
次の例では、左から直線勾配を示しています。 出発点は赤で、ゆっくりと青に移行します：
例
左から右へ直線勾配：
background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to right, red , blue); /* 标准的语法 */
}
»をお試しください
直線勾配-対角線
あなたは、水平および垂直の開始位置を指定することによって、斜めの勾配を作ることができます。
次の例では、左上隅（右下）の直線勾配から示しています。 出発点は赤で、ゆっくりと青に移行します：
例
線形グラデーションの右上隅を下げるために左上から：
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
»をお試しください
角度を使用してください
あなたは勾配の方向をより細かく制御したいです場合は、（右下へ、左へ、右へ、下から上へ、など）の観点ではなく、事前に定義された方向を定義することができます。
文法
角度は反時計回りに計算され、水平方向と勾配ラインの間の角度のことをいいます。 つまり、値は0degは下から上にグラデーションを作成します、90degは左から右へのグラデーションを作成します。
しかし、左から右に古い標準を使用して、多くのブラウザ（クローム、サファリ、fiefoxなど）、つまりは0degはグラデーションを作成することに注意し、下からグラデーションを作成します90degがトップに。 変換式90 - xは、基準角度はx = yは 、Yは、非標準の角度です。
次の例では、線形グラデーションの角度を使用する方法を示します。
例
指定した角度で直線勾配：
background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(180deg, red, blue); /* 标准的语法 */
}
»をお試しください
複数のカラー・ノードを使用して
次の例では、色の複数のノードを設定する方法を示しています。
例
色の複数のノードで上から下への直線勾配：
background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, green, blue); /* 标准的语法 */
}
»をお試しください
次の例では、直線勾配で色やテキストの虹を作成する方法を示します。
例
/* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Opera 11.1 - 12.0 */
background: -o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Firefox 3.6 - 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* 标准的语法 */
background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
»をお試しください
透明性（透明性）
透明度（透明度）をサポートCSS3勾配はまた、弱化フェードの効果を作成するために使用することができます。
透明性を追加するために、我々は、ノードの色を定義するためにRGBA（）関数を使用します。 0 1は完全に不透明で、完全に透明である：RGBA（）最後のパラメータは、色の透明度を定義し、0から1までの値であり、機能しています。
次の例では、左から直線勾配を示しています。 出発点は完全に透明であり、ゆっくりと完全に不透明な赤に移行します：
例
透明で、左から右へ直線勾配：
background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(255,0,0,1)); /* Safari 5.1 - 6 */
background: -o-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Opera 11.1 - 12*/
background: -moz-linear-gradient(right,rgba(255,0,0,0),rgba(255,0,0,1)); /* Firefox 3.6 - 15*/
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法 */
}
»をお試しください
重複直線勾配
繰り返し線形勾配（）関数は、線形勾配を繰り返すために使用されます。
例
重複した直線勾配：
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Opera 11.1 - 12.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%);
/* 标准的语法 */
background: repeating-linear-gradient(red, yellow 10%, green 20%);
}
»をお試しください
CSS3の放射状の勾配
放射状グラデーションは、その中心で定義されています。
放射状のグラデーションを作成するには、少なくとも2色のノードを定義する必要があります。 あなたはスムーズな移行を表示したい色を表すColorノード。 同時に、あなたはまた、グラデーションの中心、形状（プロトタイプまたは楕円形）、サイズを指定することができます。 デフォルトでは、中央部のものはセンター（中央に示されている）である、グラデーションの形状が楕円（代表楕円）であり、勾配の大きさは（最も遠い隅に表される）最も遠いコーナーです。
放射状グラデーションの例：
文法
放射状グラデーション-色が均等に（デフォルトで）分散ノード
例
放射状グラデーションの色のノードが均等に分散します：
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
background: radial-gradient(red, green, blue); /* 标准的语法 */
}
»をお試しください
放射状のグラデーション-色偏在ノード
例
偏在放射状グラデーションカラーのノード：
background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法 */
}
»をお試しください
設定形状
形状パラメータは、形状を定義します。 これは、値の円または楕円であることができます。 ここで、円を表す円は、楕円は楕円形を示しています。 デフォルト値は楕円形です。
例
円形状の放射グラデーションの形状：
background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
background: radial-gradient(circle, red, yellow, green); /* 标准的语法 */
}
»をお試しください
異なるサイズでキーワードを使用します
サイズパラメータは、勾配の大きさを定義します。 これは、次の4つの値を指定できます。
- 最も近い側
- 最も遠い側
- 最も近いコーナー
- 最も遠いコーナー
例
異なるサイズのキーワードで放射状のグラデーション：
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
}
#grad2 {
/* Safari 5.1 - 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Opera 11.6 - 12.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* Firefox 3.6 - 15 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
/* 标准的语法 */
background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black);
}
»をお試しください
繰り返し放射状グラデーション
繰り返しラジアル勾配（）関数は、放射状のグラデーションを繰り返すために使用されます。
例
放射状のグラデーションを繰り返します。
/* Safari 5.1 - 6.0 */
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Opera 11.6 - 12.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* Firefox 3.6 - 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%);
/* 标准的语法 */
background: repeating-radial-gradient(red, yellow 10%, green 15%);
}
»をお試しください