CSS3グラデーションを使用すると、指定された2つ以上の色の間の円滑な移行を表示してみましょう。
以前、あなたはこれらの影響用の画像を使用していました。 しかし、CSS3グラデーションを使用することによって、あなたは、ダウンロード時間と帯域幅の使用量を減らすことができます。 ズーム時に勾配がブラウザによって生成されるためまた、勾配を有する要素には、よく見えます。
CSS3グラデーションの2つのタイプを定義します。
- リニアグラデーションが（ダウン/アップ/左/右/斜め）
- 放射状グラデーション（その中心によって定義されます）
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
続いて数字-webkit-, -moz- 、または-o-接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
| repeating-linear-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.1 -o- |
| repeating-radial-gradient | 26.0 10.0 -webkit- |
10.0 | 16.0 3.6 -moz- |
6.1 5.1 -webkit- |
12.1 11.6 -o- |
CSS3線形グラデーション
線形グラデーションを作成するには、少なくとも二つのカラーストップを定義する必要があります。 カラーストップを使用すると、の間で円滑な移行をレンダリングする色です。 また、グラデーション効果と一緒に出発点と方向（または角度）を設定することができます。
構文
background: linear-gradient( direction , color-stop1 ,
color-stop2, ... );リニアグラデーション-上から下へ（これがデフォルトです）
次の例では、先頭から直線勾配を示しています。 それは黄色に移行し、赤を開始します：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow); /* For
Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, yellow); /* For
Firefox 3.6 to 15 */
background: linear-gradient(red, yellow); /* Standard
syntax */
} »それを自分で試してみてください 左から右-リニアグラデーション
次の例では、左から始まる線形勾配を示しています。 それは黄色に移行し、赤を開始します：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left,
red , yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red,
yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right,
red, yellow); /* For Firefox 3.6 to 15 */
background: linear-gradient(to
right, red , yellow); /* Standard syntax */
} »それを自分で試してみてください リニアグラデーション-斜め
あなたは、水平方向と垂直方向の開始位置の両方を指定することで、斜めにグラデーションを作ることができます。
次の例では、左上から始まり（右下に行く）の直線勾配を示しています。 それは黄色に移行し、赤を開始します：
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(left
top, red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom
right, red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom
right, red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(to bottom right, red, yellow); /* Standard syntax */
} »それを自分で試してみてください 角度を使用して
あなたは勾配の方向をより細かく制御したい場合は、（、右下に、などを左に、右に、下から上へ、）の代わりに事前定義された方向の、角度を定義することができます。
構文
background: linear-gradient( angle , color-stop1 ,
color-stop2 );
角度は水平線とグラデーションラインとの間の角度として指定されています。
次の例では、線形グラデーションの角度を使用する方法を示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(-90deg,
red, yellow); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(-90deg,
red, yellow); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(-90deg,
red, yellow); /* For Firefox 3.6 to 15 */
background:
linear-gradient(-90deg,
red, yellow); /* Standard syntax */
} »それを自分で試してみてください 複数の色の停止を使用して
次の例では、複数のカラーストップ付き（上から下へ）直線勾配を示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-linear-gradient(red,
yellow, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red,
yellow, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red,
yellow, green); /* For Firefox 3.6 to 15 */
background:
linear-gradient(red, yellow, green); /* Standard syntax */
} »それを自分で試してみてください 次の例では、虹といくつかのテキストの色で（左から右へ）の直線勾配を作成する方法を示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* For Opera 11.1 to 12.0 */
background:
-o-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/*
For Fx 3.6 to 15 */
background: -moz-linear-gradient(left,red,orange,yellow,green,blue,indigo,violet);
/* Standard syntax */
background: linear-gradient(to right,
red,orange,yellow,green,blue,indigo,violet);
} »それを自分で試してみてください 透明度を使用しました
CSS3勾配もフェージング効果を作成するために使用することができ、透明性をサポートします。
透明性を追加するために、我々は使用rgba()のカラーストップを定義する機能を。 で最後のパラメータrgba()関数は、0から1までの値にすることができ、それは色の透明度を定義します：0は完全な透明性を示し、1は、フルカラー（なし透明度）を示しています。
次の例では、左から始まる線形勾配を示しています。 これは、完全な赤色への移行、完全に透明起動します。
例
#grad {
background: red; /* For browsers that do not
support gradients */
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));
/*Fx 3.6-15*/
background: linear-gradient(to right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
} »それを自分で試してみてください 線形グラデーションの繰り返し
repeating-linear-gradient()関数は、線形グラデーションを繰り返すために使用されます。
例
繰り返し直線勾配：
#grad {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-repeating-linear-gradient(red,
yellow 10%, green 20%);
/* Opera 11.1 to 12.0 */
background:
-o-repeating-linear-gradient(red, yellow 10%, green 20%);
/* Firefox 3.6
to 15 */
background: -moz-repeating-linear-gradient(red, yellow 10%,
green 20%);
/* Standard syntax */
background:
repeating-linear-gradient(red, yellow 10%, green 20%);
} »それを自分で試してみてください CSS3ラジアルグラデーション
放射状グラデーションは、その中心で定義されています。
放射状のグラデーションを作成するには、少なくとも2カラーストップを定義する必要があります。
構文
background: radial-gradient( shape size at position, start-color, ..., last-color );デフォルトでは、形状が楕円形で、大きさは最も遠いコーナーで、位置が中心です。
放射状グラデーション-等間隔の色を停止（これがデフォルトです）
次の例では、等間隔のカラーストップで放射状のグラデーションを示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red, yellow, green); /*
Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, green); /* For Opera
11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, green); /*
For Firefox 3.6 to 15 */
background: radial-gradient(red, yellow, green);
/* Standard syntax */
} »それを自分で試してみてください 放射状グラデーション-異なり等間隔の色を停止
次の例では、異なる間隔を置いたカラーストップで放射状のグラデーションを示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(red 5%,
yellow 15%, green 60%); /*
Safari 5.1-6.0 */
background: -o-radial-gradient(red 5%, yellow
15%, green 60%); /* For Opera
11.6-12.0 */
background: -moz-radial-gradient(red 5%, yellow 15%,
green 60%); /*
For Firefox 3.6-15 */
background: radial-gradient(red 5%, yellow
15%, green 60%);
/* Standard syntax */
} »それを自分で試してみてください シェイプを設定します
形状パラメータは、形状を定義します。 これは、値の円または楕円を取ることができます。 デフォルト値は楕円形です。
次の例では、円形の形状に放射状のグラデーションを示しています。
例
#grad {
background: red; /* For browsers that do not
support gradients */
background: -webkit-radial-gradient(circle, red, yellow, green); /*
Safari */
background: -o-radial-gradient(circle, red, yellow, green); /* Opera
11.6 to 12.0 */
background: -moz-radial-gradient(circle, red, yellow,
green); /* Firefox 3.6 to 15 */
background: radial-gradient(circle, red,
yellow, green);
/* Standard syntax */
} »それを自分で試してみてください 異なるサイズのキーワードの使用
サイズパラメータは、勾配の大きさを定義します。 それは4の値をとることができます。
- 最も近い側
- 最も遠い側
- 最も近いコーナー
- 最も遠いコーナー
例
異なるサイズのキーワードで放射状のグラデーション：
#grad1 {
background: red; /* For browsers that do not
support gradients */
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60%
55%, closest-side, red, yellow, black);
/* For Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%, closest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%,
closest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
/* Safari 5.1 to 6.0 */
background: -webkit-radial-gradient(60% 55%, farthest-side,
red, yellow, black);
/* Opera 11.6 to 12.0 */
background: -o-radial-gradient(60% 55%,
farthest-side, red, yellow, black);
/* For Firefox 3.6 to 15 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Standard syntax */
background: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
} »それを自分で試してみてください 放射状の勾配を繰り返します
repeating-radial-gradient()関数は、放射状グラデーションを繰り返すために使用されます。
例
繰り返し放射状グラデーション：
#grad {
background: red; /* For browsers that do not
support gradients */
/* For Safari 5.1 to 6.0 */
background: -webkit-repeating-radial-gradient(red,
yellow 10%, green 15%);
/* For Opera 11.6 to 12.0 */
background:
-o-repeating-radial-gradient(red, yellow 10%, green 15%);
/* For Firefox
3.6 to 15 */
background: -moz-repeating-radial-gradient(red, yellow 10%,
green 15%);
/* Standard syntax */
background:
repeating-radial-gradient(red, yellow 10%, green 15%);
} »それを自分で試してみてください 練習で自分自身をテスト！
演習1» 演習2» 演習3» 演習4» 演習5» 演習6» 演習7»