linear-gradient() ファンクション
linear-gradient() ファンクションは、2色以上の線形グラデーションを生成する CSS 関数です。 CSS の <image> データ型の派生である <gradient> データ型を扱います。
backgroundと linear-gradient() 関数の組み合わせでテキストにマーカーを引いたような装飾もできます。
円形グラデーションを表示するにはradial-gradient()関数を利用します。
linear-gradient() 関数は CSS の <image> データ型を扱います。 そのために <image> データ型が使用できる、background-image などのプロパティで使えます。
ページ内 Index
構文(Syntax)
CSS
第1引数のグラデーションをかける方向を指定します。単位を deg で指定するか、以下のようにワードで指定します。
キーワード | 方向 |
---|---|
to bottom | 上 から 下 |
to top | 下 から 上 |
to right | 左 から 右 |
to left | 右 から 左 |
to right bottom | 左上 から 右下 |
to left bottom | 右上 から 左下 |
単位 deg で指定する場合は以下のようにします。
Example
linear-gradient()関数の例です。この関数は、<image>データ型が使用できるプロパティのみで使えます。 関数による返り値がプロパティの値になります。
ここでは背景に線形グラデーションを表示します。
JavaScript
JavaScript では、HTMLElement.style.background プロパティに linear-gradient() 関数を設定する方法があります。 ベンダープレフィックス -webkit-gradient() 関数による設定である必要があるかもしれません。
または、以下のように HTMLElement.style に 。background: を利用した値を指定することで表示できるようです。
関連する CSS
<gradient> データ型を扱う CSS の関数には以下があります。
関連 CSS 関数
以下は、<gradient> データ型に関連する CSS 関数です。
関数名 | 概要 |
---|---|
linear-gradient() | 線形グラデーション |
radial-gradient | 円形の放射状グラデーション |
linear-repeat | 縞模様のパターングラデーション |
radial-repeat | 縞模様で放射状のパターングラデーション |
conic-gradient | 扇形のグラデーション |
関連プロパティ
以下は CSS の <image> データ型に関連するプロパティです。
プロパティ名 | 概要 |
---|---|
background-image | バックグランドプロパティの一括指定 |
list-style-image | <ul> リストのマーカー |
border-image-source | 画像を利用した border |
cursor | カーソル |
content プロパティ | 疑似エレメント ::after、::before で利用する content プロパティ |