CSS3勾配（線形勾配とラジアル勾配）を見てください。線形グラデーション

赤

緑

青

赤

緑

青

準備完了CSSグラデーションコード

パラメータCSSグラデーションジェネレータオンライン

左勾配。赤、緑、青の組み合わせを使用して、左側の色合いの色を選択します。

正しい色の勾配。右側の色の色合いを選択してください。

グラデーション間のレベル。グラデーションが始まるブロックの左側からの距離。

ぼやけている。色のレベルから2色を混ぜる。

コーナーボーダーグラデーション。 0~365度の均一な色の変化のための線方向。

すべてのプロパティCSS Gradient

CSSグラデーションは、INの要素に重ね合わされています 貸付ページ のようなもの

グラデーションボタン 着陸を飾る。
リアCSS グラデーションの背景 セクション
勾配 ピクチャー 透明性を持つCSS。
CSS グラデーションテキスト 大きなヘッダー

グラードクラスを使用してDIVタグに単純な要素を作成します。グラデーションを課すために グレードクラス 輪郭を尋ねましょう 幅と高さで ファイルでスタイルCSS。。その後、CSS Gradient Generatorで表示されたグラデーションのプロパティを追加できます。勾配は施設内に設定されています バックグラウンド。それからプレフィックスを書いてください ウェブキットリニアグラデーション。 正しい表示のために別のインターネットブラウザ次に何を書きます 種は勾配になります3から選択してください。

線形グラデーションCSS。 2色以上で構成されています。色は、角度の助けを借りて、線に沿って均等に均等に異なります。

ラジアルグラデーション。 1から別の色は、要素の内側に円の形で均等に分布しています。

繰り返し勾配 繰り返しプロパティで。直線的および半径方向に適しています。

cSSグラデーションの例

例であらゆる種類の勾配を分析します。

1）。例の線形勾配（）線形グラデーション

w 線形グラデーション傾斜角はパラメータによって設定されます de またはキー

グラデーション1（
背景：リニアグラデーション（45deg、アクアマリン、グリーニア）。
}

グラデーション2（
背景：リニアグラデーション（左上、フクシア、ミッドナウンスブルー）。
}

グラデーション3（
背景：リニアグラデーション（トップ、サドルブラウン20％、オルタネージメント50％、ゴールデンロッド80％）。
}

グラデーション4（
背景：線形勾配（右へ、ライトブルー20％、Lightgreen 20％、アザミ80％、小麦80％）。
}

2）。ラジアルグラジエント（）ラジアルグラデーションの例

グラデーション5（
背景：ラジアルグラデーション（耐光性、パパイアウシップ）。
}

via 鍵の鍵 ラジアルグラデーションの先頭の点を指定します。

グラデーション6（
背景：ラジアルグラデーション（上、ターコイズ、紺碧）。
}

皮リの寸法を設定します パーセントで

最初の意味幅.
第二に高さエリー。

グラデーション7（
背景：ラジアルグラデーション（40％50％、ミディアムパルプル、貝殻）。
}

using 角キーの鍵 グラデーションサイズを長隅に設定する。

グラデーション8（
背景：ラジアルグラデーション（100px 50px、黄色、DimGreay）の円形勾配。
}

勾配が丸めになるように キーサークル。デフォルトではそれは形式です 楕円。

グラデーション9（
背景：ラジアルグラデーション（70％10％、ライトシャン、マゼンタ）。
}

3）。繰り返し線形勾配または繰り返し放射状勾配繰り返しCSS勾配

グラデーション10（
背景：繰り返し - ラジアルグラデーション（円、ミディアムスプリンググリーン、ミディアムスプリンググリーン15ピンク、ピンク15ピックス、ピンク30px）;
}

グラデーション11（
背景：繰り返し線形勾配（45deg、＃606dbc、＃606dbc 20px、＃465298 20px）;
}

a！勾配は操作色のための優れた器具です CSS3。画像を使用する代わりに、Webページにグラデーション効果を作成するために、利益を得ることになります。 CSS3グラデーション そしてそれによってサイトを「促進する」こと。ユーザーは背景画像のダウンロードで時間とトラフィックを過ごす必要はありません。勾配には2つの主要な種類があります：ラジアルとリニア。今日の投稿はそれらのことになります。

線形グラデーション

分類で言うように、 cSS3の勾配 画像です。それらのための特別なプロパティはありません。そして広告のために背景画像のプロパティを使用します。

一般的な場合は、グラデーションの構文（線形）が次のようになります。

1
2
3
4
5
6
7

div（
背景画像： - ウェブキット - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景画像： - モズ - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景画像：-ms - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。
背景 - 画像：-O - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。

}

それで、順番にすべてについて行こう。

まず第一に、線形勾配が線形勾配（）関数宣言されています。この機能には3つの主な値があります。最初の値は初期位置を決定します。例示的な上に示されたもの上からのソース位置。下、左右を使用することもできます。

角度が負の場合、位置は左下隅から左上に変わります。

関数の2番目の値は初期色とその停止位置です。これはパーセントで示されます。この位置のお知らせは不要です、デフォルトのブラウザは最初の色値が0％に適しています。

最後の値は2番目の色とその停止位置です。デフォルトでは100％の値を取ります。これらの極値の値と彼らは最初の色がすぐに2番目に移動し始めることを意味します。ただし、50％の最初の色をインストールすると、アクセス可能な高さの中央からのみ2番目に移動し始めます。これはコードの外観のようなものです。

高度に同じストリップを手に入れます。明確な境界を持つと、色移行はそうしません。それがどのように機能するかをよりよく理解するために、値を実験してください。

ラジアル勾配と線形勾配が宣言されており、すでにラジアルグラデーション（）しかありません。主な値もあります。これはラジアルグラデーション（円 - 円または楕円 - 楕円）、初期および最終色の形式です。構文は次のとおりです。

div（
背景：ラジアルグラデーション（円、＃F9E497、＃FFAE00）。
}

フォームを指定しないと、楕円はデフォルトでインストールされます。

また、デフォルトはグラデーションの中心位置ですが、変更できます。位置コマンド（上、下、左、右）、およびそれらの組み合わせを設定するか、パーセントまたはピクセルで指定することができます。

チームの組み合わせ：

上部を中心としたトップ - 50％0％。
左上隅に - 左上から0％0％。
右上隅に - 右上 - 100％0％。
中心 - 中心 - 50％50％。
中央に残されて - 左中央 - 0％50％。
中央の右 - 右中央 - 100％50％。
下の中央に - 下 - 下 - 50％100％。
左下の角に - 左下 - 0％100％。
右下隅 - 右下 - 100％100％。

これがパーセンテージの例です。

div（
背景画像：ラジアルグラデーション（70％20％、円、＃F9E497、＃FFAE00）。
}

軸に沿った最初の値 h 第二に w.

また、半径方向勾配をサイズに設定することができます。サイズは勾配の形の後のギャップを通して示されます。デフォルトが適用されました corner corner （遠くに）。計算はグラデーションの中心点から次のように実行されます。

に、例について考えることをお勧めします。白い初期と究極の青の楕円勾配：

div（
背景 - イメージ：ラジアルグラデーション（230ピックス50px、楕円）;
}

サイズは最も近い側面までの距離から計算されます、それは軸に沿って上部が近いことは明らかです y。左軸 バツ。.

そして今遠い側面に：

div（
背景画像：ラジアルグラデーション（230ピクセル50px、楕円形、ホワイト、ブルー）;
}

彼らが顔に言うように結果。サイズは遠方側までの距離から計算されます。

ラジアルでは、色の線形勾配のように、停止位置を適用することができます。色の透明性を達成する必要がある場合は、RGBAを使用してください。

div（
背景画像：線形勾配（上部、RGBA（255,90,0,0.2）、RGBA（255,174,0,0.2））。
}

アルファ運河、最後および0.2のものであるものは、20％が100％から使用されていることを示します。

両方のタイプで CSS3グラデーション 2色を使用できませんが、数色です。

div（
背景画像：リニアグラデーション（上、赤、オレンジ、黄、緑、青、インディゴ、バイオレット）。
}

両方の種の場合、色の繰り返しを使用できます。すなわち、これらの値からサイクルが形成されている。ラジアルのための線形および繰り返しラジアル勾配（）のための繰り返し勾配、繰り返し線形勾配（） - の機能。

div（
背景画像：繰り返しラジアルグラデーション（赤、青20px、赤40px）。
}

0％、＃FFAE00 100％）。 / * Firefox * /
背景画像：-ms - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。 IE 10以降の場合は/ * * /
背景 - 画像：-O - リニアグラデーション（TOP、＃FF5A00 0％、＃FFAE00 100％）。オペラ* /のための* /
背景画像：線形勾配（上、＃FF5A00 0％、＃FFAE00 100％）。 / *標準構文* /
}

div（
フィルタ：PROGID：dximageTransform.microsoft .gradient（StartColorStr \u003d＃33FFF5A00、ENDCOLORSTR \u003d＃33FFAE00）。
}

ここで、格子直後の33は色彩度の割合です。

記事があなたにとって有用であることが判明したことを願っています、そして、考慮されるトピックは完全に開示されています。

新鮮な記事とレッスンを購読することが最新の状態に留まります

最終更新日：2016/04/21

勾配は、ある色から別の色への滑らかな遷移を表します。 CSS3には、要素の背景を作成するために使用できるさまざまなグラデーションがあります。

CSSのグラデーションはいくつかの特別なプロパティを表していません。背景画像プロパティに割り当てられている値を作成します。

線形勾配は、要素の一方の端から別の端部への直線で伝播し、ある色から別の色への滑らかな遷移を行います。

グラデーションを作成するには、次のように、始点と複数の色を指定する必要があります。

背景画像：線形グラデーション（左、黒、ホワイト）。

この場合、グラデーションの先頭は要素の左端になります。これは左の値で表されます。グラデーションカラー：黒（黒）と白（白）。つまり、要素の左端から右側に始まると、白から黒から滑らかに行く予定です。

グラデーションの使用では、1つの欠点があります。ブラウザの多様性は、ベンダープレフィックスを使用することを強いられます。

WebKit- / * for. グーグルクローム。、サファリ、マイクロソフトエッジ。、Opera for Opera Firefox * / -o - / * for Opera古いバージョン（Opera 12）* /

だから、グラデーションの完全な使用は次のようになります。

CSS3におけるテーブルの定型化

線形黒と白の勾配

グラデーションの先頭を取り付けるには、次の値を使用できます。左（左から右）、右（左）、上下（上に）または下（ボトムアップ）。たとえば、垂直方向のグラデーションは次のようになります。

背景画像：線形グラデーション（下、黒、ホワイト）。

2つの値を使用して斜め方向を指定することもできます。

背景画像：線形グラデーション（左上、ブラック、ホワイト）。

上または左側のタイプの特定の値に加えて、0から360までの角度を指定することもできます。これにより、グラデーションの方向が決まります。

背景画像：リニアグラデーション（30deg、ブラック、ホワイト）。

角の後、単語DEGが表示されます。

たとえば、0degはグラデーションが左側で始まり、に移動することを意味します。右の部分45DEGを指定すると、左下隅から始まり、右上隅まで45°の角度で移動します。

グラデーションの先頭を決定した後は、適用された色や潮吹き点を指定できます。色は2つになる必要はありませんが、それ以上のものがあるかもしれません：

背景画像：線形グラデーション（上、赤、＃CCC、青）;

使用されているすべての色は均等に分布しています。ただし、カラーポイントの背景の特定の場所を指定することもできます。これを行うために、第2の値が色の後に追加され、ポイントの位置を決定します。

背景画像：線形グラデーション（左、#CCC、赤20％、赤80％、#CCC）。

繰り返し勾配

リピングリニアグラデーションを使用すると、繰り返しのリニアグラデーションを作成できます。例えば：

背景画像：繰り返し線形勾配（左、#CCC 20PX、RED 30px、RGBA（0,0,126,,5）40px）。背景 - 画像： - モス繰り返し - 線形勾配（左、＃CCC 20px、赤30px、RGBA（0,0,126,,5）40px）。背景画像： - ウェブキット繰り返し - リニアグラデーション（左側、＃CCC 20px、赤30px、RGBA（0,0,126,,5）40px）。

この場合、グラデーションは灰色のストリップ（#CCC）20ピクセルの幅から要素の左端で始まり、次に最大30ピクセル、次に最大40ピクセル、淡青への戻り遷移が得られます。色（RGBA（0,0,0,126,,5））。その後、ブラウザは要素の表面全体を埋めるまで勾配を繰り返す。

カラーグラデーションは、1からの滑らかな移行です指定された色中間色を通して別のものに。線形勾配では、遷移は点から直線で発生します A. ポイントへ b。勾配は2つ以上の基準点を持つことができます - その後、遷移はポイントから行われます A. ポイントへ bその後、ポイントから b ポイントへ C. 等

CSSでバックグラウンドの線形勾配を作る方法

CSS3では、既知の背景画像プロパティを介してアイテムにグラデーションの背景を追加できます。線形勾配（）の値は値として使用されます。ここで、括弧内には、グラデーションの開始点、初期色、および最終色が必要です。

たとえば、バイオレットカラーから赤への遷移でバックグラウンドリニアグラデーションを作成しましょう。同時に、紫色の初期点を右側にすることができ、勾配ベクトルが左に送信されました。コードを書きます。

背景画像：線形グラデーション（左、紫、赤）。ブロック上のバ\u200b\u200bックグラデーション

400×400倍

グラデーションポイントの色は、16進コード、RGB形式、またはその他のものであろうと、CSSにアクセス可能な任意のフォーマットで記録できます。グラデーションの方向はTOEを使用して設定されます。キーワード左、右、上下に、傾きを変えるために組み合わせることができます。例えば：

背景画像：リニアグラデーション（右下へ、＃EE82EE、＃FF0000）。

さらに、（スペースなしで）遅延接頭辞で正または負の数を使用して、直接傾斜角を直接指定できます。 0°または360°の所与の角度では、グラデーションラインは上に進みます。傾斜角が増すにつれて、ベクトルの動きは時計回りに発生します（負の値を使用する場合、動きは反対に変わります）。コード記録例：

背景画像：線形グラデーション（-110deg、＃EE82EE、＃FF0000）。

複数の基準点

私たちが言ったように、勾配は2つ以上の基準点を持つことがあります。同時に、バックグラウンドは、第1の色から第2から3番目まで、第3から3番目まで、最終的な基準点に達するまで、スムーズに第2から3番目まで移動する。グラデーション内のこれらのポイントの数を増やしたい場合は、それらをコンマから追加してください。例えば：

背景画像：リニアグラデーション（145deg、＃EE82EE、スレートブルー、＃FFD86A、紫色）。

この例では、4つの基準カラーポイントが示されていますが、できるだけ追加のカラーフォーマットで追加できます。

長さの遷移

デフォルトでは、ブラウザは等しい距離で点を配置するので、階調は均一です。しかし、この距離はユニットを使って制御できます cSS測定。次の例を分析しましょう。

背景画像：線形勾配（＃92009B 20％、＃F5E944 90％、＃00FFA2）。

色の後のコードでは、＃92009bは20％示されています。それは第1の基準点の近くに立っているので、これは要素の長さの20％が指定された色で塗られることを意味します。その後、グラデーションが開始されます.0は、90％の値がブラウザを話します。これは、カラー＃F5E944から要素の長さの90％に達する必要があります（20％から始まります）。その後、残りのスペースは3番目の色への移行を開始します - ＃00FFA2。

このトピックには練習も必要です。いくつかのサポートポイント（2つ以上）でグラデーションの背景を作成してみて、距離で再生し、ブラウザのグラデーションの変更を監視してください。

ベンダのプレフィックス

クロスブラウザをいくつかの遅いCSSプロパティに提供するには、ベンダープレフィックスを追加する必要があります - ブラウザ開発者を追加する特別なコンソール：

-webkit- - Chrome、Safari、Android用プレフィックス。
-moz- - Firefox用の接頭辞。
-o- - Operaの接頭辞。

グラデーションの背景には、ブラウザの最大数をサポートする必要がある場合は、プレフィックスデータを使用する必要があります。これを行うには、次のようにコードを適応させます。

背景画像： - ウェブキット - リニアグラデーション（左、紫、赤）。背景 - 画像： - モズ - リニアグラデーション（左、バイオレット、赤）。背景画像：-O - リニアグラデーション（左、バイオレット、赤）; 背景画像：線形グラデーション（左、紫、赤）。

別のアナウンスを作成するプレフィックスを追加するには。また、気付くように、ベンダーのプレフィックスのプロパティ じゃあ グラデーションの方向を指定するときに使用するプレフィックスを使用する必要があります。

Internet Explorerのサポート

残念ながら、グラデーションの背景はIE10 +でのみ機能します。以前のバージョンそれを理解してはいけず、無視します。少なくとも古いブラウザの背景を確保するために、Tを作成できます。N. "cap"：適切なシェードを選択してBackground-Colorプロパティを書き留めます。 over グラデーションのある財産。この方法では、古いブラウザ「バックアップ」の背景色を適用し、不明なプロパティはそれを欠場しますが、より現代的なブラウザでは、グラデーションの背景はしっかりした背景に落ちてブロックします。

（たとえば、RGBAカラーフォーマットを使用するなど）、バックアップスタブの背景を分散させたくない場合は、バックグラウンドイメージの代わりに短縮されたBackgroundプロパティを勾配を設定してください。その後、背景色の値は透明に上書きされます。

教科書にさらに： 繰り返し線形勾配（）は繰り返し線形勾配です。

グラデーション - 選択した領域を滑らかな遷移を持つ一連のカラーシェードを埋めます。勾配は、2つ以上の指定された色の色合いの間の滑らかな遷移を表示するために使用されます。グラデーションの例

以前は、背景画像を使用して勾配効果を作成した。これで、CSS3を使用してグラデーションの背景を作成できます。 CSS3グラデーションを持つ要素は、ゼロウス接続された背景画像よりも増加すると、勾配が指定された領域の直下にブラウザによって生成されるため、よりよく見えるほうがよいです。

CSSグラデーションは、ブラウザによって作成された背景画像であり、背景色ではなく、Background-Imageプロパティの値として定義されます。つまり、グラデーションは、バックグラウンドイメージプロパティの値としてだけでなく、バ\u200b\u200bックグラウンドイメージをリストスタイルイメージと背景に挿入できるところも指定できます。

CSS3は2種類のグラデーションを定義します。

線形グラデーション (線形グラデーション） - 色から色への滑らかな移行を直線的に滑らかにします。
ラジアルグラデーション（ラジアルグラデーション） - 色から色への円滑な移行は、すべての方向のある点からです。

線形グラデーション

線形勾配が直線で広がると、ある色の色から別の色合いへの滑らかな遷移を示します。線形勾配（）関数を使用して線形勾配が作成されます。関数は、指定された色の間の線形勾配である画像を作成します。勾配のサイズは、それが適用される要素のサイズに対応する。

linear-gradient（）関数は、次のセミコロン引数を取ります。

最初の引数としては、勾配線方向の方向を決定する角度やキーワードがある。オプションの引数
リストの位置に続くことができる2つ以上の色からなるリスト共有リスト。

最も簡単な線形グラデーションでは、最初の色と最終色を定義する引数が2つだけです。

div（ブラック、ホワイト）;幅：200ピクセル;高さ：200ピクセル; try»

2つの引数の関数が送信されると、上からの初期点で垂直方向の勾配が取り付けられています。

グラデーションラインの方向は、2つの方法で決定できます。

第1の引数としての角度の使用は、勾配線の角度の角度の角度を転送することができ、例えば、勾配の方向を決定することができ、例えば、勾配の方向を決定する（England度から切り取る）はグラデーションラインを決定する。要素の上部に下限が上に囲まれて、角度90DEGは、右側に左右に残す傾斜線を決定します。単純に置くと、正の角度はそれぞれクロックにそれぞれ正の回転です。最初の引数としてキーワードを使用すると、「TOP TO TO TOP」、「右」、「右端」、「左から左」に送信することもできます。「0DEG」「90DEG」「180DEG」「270DEG」それぞれ。

2つのキーワードを使用して角度を右上に設定することもできます。グラデーションラインは右上隅に向けられます。

さまざまな方向に指定されたグラデーションの例：

div（マージン：10ピクセル;幅：200ピクセル;高さ：200ピクセル; float：左;）※（左、黒、赤）;）#two（バックグラウンドイメージ：リニアグラデーション（左上、黒、赤） ;）#three（バックグラウンド画像：リニアグラデーション（65deg、ブラック、黄色）;）試してください」

既に述べたように、線形グラデーションは、カンマによって区切られた2色以上のリストを含み得る、ブラウザは利用可能な領域全体でそれらを均等に分散させることができる。

div（マージン：10ピクシ;幅：200ピクセル;高さ：200ピクセル;フロート：左;）※※（背景画像：右、赤、青、黄色）;）#two（バックグラウンドイメージ：線形 - グラデーション（左上、青、白、青）;）試してみてください»

色の後、勾配の初期点と終点に対して色の位置を決定する（別の色が別の色で移動し始める）の停止位置を指定できます。停止位置は、CSSまたはパーセントでサポートされている測定単位を使用して表示されます。興味を使用する場合、勾配線の長さに応じて停止位置の位置が計算される。 0％の値はグラデーションの初期点、100％ - 最後のものです。

div（マージン：10ピクセル;幅：200ピクセル;高さ：200ピクセル; float：左;）※※（背景画像：リニアグラデーション（右上、青、白70％、青）;）#two（バックグラウンドイメージ：リニアグラデーション（右下、黄色10％、ホワイト、赤、黒90％）;）#three（右へ、黒い10％、黄色、黒90％）。

カラー値を指定できます違う方法例：カラー名を指定し、RGB（RGBA）またはHSL（HSLA）構文を使用して16進値（16進数）を使用してください。例えば、透明性を有する勾配の使用は、背景色または勾配の下にある画像と組み合わせて使用\u200b\u200bすることができ、興味深い視覚効果を生み出す。

div（マージン：10px;幅：300ピクセル;高さ：100px;背景色：緑;）#ONE（背景：リニアグラデーション（左、RGB（255,255,0,0））;）#two（背景：線形勾配（RGB（255,255,255,0））;）;）

印字