CODING

[CSS] linear-gradient()グラデーション

投稿日:


どうも、べ〜やんです。

今回は、グラデーションを指定するlinear-gradient()を紹介します。





linear-gradient()とは


linear-gradient()は背景色をグラデーションで表現にしたいときなどに使用する関数です。

linear-gradient()は指定した色でグラデーションの画像データを生成してくれます。なので、使用するプロパティはbackgroundもしくはbackground-imageを使用します。

background-colorでは使用できないので注意してください。

値は角度、色など指定します。


使い方


色だけ

まずは色だけを指定してみます。

background: linear-gradient(red, blue);

結果は縦のグラデーションになります。

See the Pen XWWyreb by beeyan (@orientado) on CodePen.


二色以上でも指定できます。

See the Pen YzzRKjE by beeyan (@orientado) on CodePen.


向き

グラデーションの向きを指定するにはto rightto leftto topto bottomなどで指定します。二つ指定して斜めにすることもできます。

background: linear-gradient(to top, red, blue);
background: linear-gradient(to bottom, red, blue);
background: linear-gradient(to right, red, blue);
background: linear-gradient(to left, red, blue);
background: linear-gradient(to top right, red, blue);
background: linear-gradient(to bottom right, red, blue);
background: linear-gradient(to top left, red, blue);
background: linear-gradient(to bottom left, red, blue);

See the Pen dyyQbdR by beeyan (@orientado) on CodePen.


向き2

もっと細かく角度を設定するには、数値で角度を指定できます。単位はdegを使用します。

background: linear-gradient(45deg, red, blue);

See the Pen oNNQvdw by beeyan (@orientado) on CodePen.


割合

色が変わる位置を%で指定できます。

background: linear-gradient(red, blue 50%);

See the Pen zYYMOaq by beeyan (@orientado) on CodePen.



色をくっきり分けることもできます。

See the Pen ZEEmzMG by beeyan (@orientado) on CodePen.


See the Pen qBBQWQm by beeyan (@orientado) on CodePen.


おわりに


今回は、グラデーションを指定するlinear-gradient()を紹介しました。

色や角度の組み合わせでいろんな表現ができますね。



-CODING
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

CSSエフェクト紹介サイト!CSSFX

どうも、べ〜やんです。 今回は、CSSのおしゃれなエフェクトを紹介してくれるサイト『CSSFX』を紹介します。 CSSFXとは 引用元:CSSFX CSSFXはCSSのクリック、ホバー、ローディング時 …

[CSS] CSSで縦書きにする方法

どうも、べ〜やんです。 今回は、CSSで簡単にテキストを縦書きにする方法を紹介します。 和風のデザインやサイドにメニューバーを配置する時などに便利です。 縦書きデザイン 和風テイストのデザインやサイド …

[css] Flexboxの子要素

どうも、べ〜やんです。 今回は、Flexboxの使い方の子要素に使うプロパティを紹介します。 横並び、親要素についてはこちら↓ [css] 横並び、flexboxの使い方 flexboxの種類 (子要 …

[HTML] 特殊文字で空白スペース

どうも、べ〜やんです。 今回は、特殊文字を使って空白スペースを挿入する方法を紹介します。 空白スペース htmlではひとつの半角スペースは空白スペースとして使用できますが、連続した半角スペースはひとつ …