CSSで要素に線形のグラデーションを指定する方法/background:linear-gradient()の使い方

color IT

日に日に? 進化するCSS、そのひとつの収穫であるグラデーションは正直使いどころが難しいんですが、アイデア次第でページに一味違った雰囲気を与えてくれます。

Advertisements

背景を線形のグラデーションにする方法

コードは下記の通り。

背景を線形のグラデーションにする
background:linear-gradient(方向/角度,開始色,終了色)
※方向/角度は省略可能

色だけだとこうなります。

background:linear-gradient(grey,white)

方向を指定するとこうなります。

background:linear-gradient(to bottom,grey,white)
background:linear-gradient(to left,grey,white)

角度を指定するとこうなります。

background:linear-gradient(45deg,grey,white)
background:linear-gradient(225deg,grey,white)

※deg = degrees

3色以上にする場合

単純に色を増やせば色が増えます。

background:linear-gradient(grey,blue,white)

途中の色はパーセンテージを指定することで位置を調整することが可能です。

background:linear-gradient(grey,blue 30%,red 80%,white)
background:linear-gradient(grey,blue 40%,red 90%,white)
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント