IT the Best

HTML/CSS/JSに関する情報やはてなブログのカスタマイズに関する情報を掲載しています。

【WEBデザイン】を美しくする | グラデーション(linear-gradient())



【WEBデザイン】を美しくする | グラデーション


linear-gradient()

 CSSのbackgroundプロパティに使用することのできる関数です。

使い方

 background:linear-gradient(グラデーションの方向,開始色,途中色,終了色)

各指定値はカンマごとに入力します。

グラデーションの方向

 向きによる指定

  • 右に向かって変わる:to right
     
  • 上に向かって変わる:to top
     
  • 左に向かって変わる:to left
     
  • 下に向かって変わる:to bottom
     

 角度による指定

  • 45度に向かって変わる:45deg
     
  • 160度に向かって変わる:160deg
     
  • 275度に向かって変わる:275deg

     
途中色

 開始色と終了色の間に指定する色は省略も可能です。その場合は開始と終了の2色になります。途中色をうまく使用することできれいなグラデーションにすることができます。

グラデーションをつくる

方向:開始色(rgb型):

  • 赤:
  • 緑:
  • 青:
 

※開始色をもとにrgb値を大きくしてグラデーションをつくります。終了色は白色固定です。

プロパティとその値

background:linear-gradient(90deg,#64c80a,#ffffff);