線上のグラデーションを表現する

linear-gradient()関数を利用すると、指定した色から色へ滑らかに変化する線形グラデーションを表現できます。この関数は、画像を扱えるプロパティとして指定する。

画像を扱えるプロパティすべてに指定できることに仕様上なってますが、Firefoxとか古いブラウザだと、background-image,backgroundプロパティにのみ適用されている点を頭の片隅に入れた方がいいです。

linear-gradient()関数の引数

●方向

グラデーションの方向は、ボックスの中心点を通る「グラデーションライン」の向きで決まる。このグラデーションラインの方向(終了点の方向)を角度かキーワードで指定します。

角度を使うときは、上方向を0度として、右方向が90度、下方向が180度のように時計回りで指定します。角度のです。

キーワードの場合は、「to キーワード」という書き方で、「top」「bottom」「left」「right」またはこれらの単語を組み合わせて指定する。

例えば、「to top」は下から上、「to right」は左から右へのグラデーションとなります。ただ「to top right」という形でキーワードを組み合わせたときは、必ずしも45度にはなりません。

グラデーションラインはボックスの対角線と直交する形で左上から右下へ設定されて、グラデーションの方向が決定されます。なので、ボックスサイズによりグラデーションの角度が変わります。

方向を省略すると、「to bottom」上から下を指定されたものとして扱います。

グラデーションの開始店と終了点は、ボックスの角を通る直線がグラデーションラインと直交する位置です。

●カラーストップ
　色と値と位置を、半角スペースで区切って書きます。位置を指定したいとき「10px」「10%」とように実数値＋単位か、「%値」で指定します。終了点は「100%」です。

サンプルコードの実行結果はこちら