HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

応用52. 線形グラデーションの指定(liner-gradient)

      2017/07/11

liner-gradient(ライナー グラディエント)

線形グラデーションは、CSS3でbackground-imageプロパティの新しい値として追加されました。
background-colorプロパティの値ではないので注意してください。
※Internet Explorer 10以上から対応

liner-gradientの各ブラウザの対応状況
Can I use -CSS Gradients-

ベンダープレフィックスに関しては、pcは指定しなくても良く。スマホは、Android4.4のブラウザ、iOS7.0のSafari以上なら指定する必要がなくなりました。
ただし、古いスマホでも対応させるため、現状ではベンダープレフィックスは、-webkit-のみつけるようにしておきます。
背景グラデーションに対応していないブラウザの場合、背景グラデーションが表示されないので、背景色(background-color)の指定をして回避します。
各値は、カンマで区切ります。

線形グラデーション

複数カラーの指定

カンマで区切ることによって、中間のカラーを増やすことができます。

線形グラデーションの複数カラーの指定

各色の開始位置の変更

カラーの後に半角スペースで区切り、開始位置を入れます。
開始位置の指定がないカラーは中間の位置から開始します。
指定できる単位は、pxまたは%です。

線形グラデーションの開始位置の変更

線形グラデーションの向きの変更

線形グラデーションの向きは1つ目の値をカンマで区切り、終了方向を指定します。
指定できる値は、top、left、right、bottom
また、向きの前に to を付ける必要があります。
注意点として、ベンダープレフィックスを付ける場合は、開始方向で指定することと to を外すことです。
そのため、ベンダープレフィックスを付けた場合と付けない場合、向きが反対の指定になります。

左方向から線形グラデーション

まとめ

  • liner-gradientは、CSS3で追加されたbackground-imageの値
  • カンマで区切ることで、複数カラーの指定ができる
  • カラーの後に開始位置の指定ができる
  • box-shadowは内側の指定が可能
  • 1つ目の値で方向を変更することができる
  • スマホに対応させる場合は、-webkit-のベンダープレフィックスをつける

 - HTML・CSS