css

【css】linear-gradient()を背景として使う

2020/07/18

linear-gradient()の基本的な使い方と、背景として私がよく使う見せ方をご説明します。

linear-gradient()の基本

linear-gradient(方向(角度),  開始色,  終了色);

See the Pen linear-gradient-sample01 by muko (@mkpn) on CodePen.

これが基本になります。
細かいパラメータにつきましては、下記リンクからご確認ください。
【mozilla.org】linear-gradient()

方向を角度にして、3色で表示

See the Pen linear-gradient-sample02 by muko (@mkpn) on CodePen.

色数は何色でも設定できます。また角度に関してはマイナス(―)値の設定も可能です。

グラデーションの割合を指定する

See the Pen linear-gradient-sample03 by muko (@mkpn) on CodePen.

数値はパーセント(%)以外にも、ピクセル(px)での指定も可能です。

linear-gradient()を背景として使う

上のサンプルのようなグラデーション表現は、私は正直あまり使いません。
使う時は、あまりグラデーションさせずに使うことが多いです。

グラデーションさせずに、2色の背景として使う

See the Pen linear-gradient-sample04 by muko (@mkpn) on CodePen.

See the Pen linear-gradient-sample05 by muko (@mkpn) on CodePen.

※ 右上の『CODEPEN』を押すと拡大してご確認できます。

LPだったり、LPっぽい長めのページなどを作るとき、よく上のような『linear-gradient()』を使います。
一見すると、コーディングで悩みそうな感じがするのですが、『linear-gradient()』を使うとイッパツで処理できますし、見た目も凝ったレイアウトに見えるので、重宝してます。

CSSで背景に縦線を引く │ MUKOLOG

背景に縦線をcssで引く方法を解説します。


-css

© 2020 MUKOLOG