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

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

      2018/10/05   hatano

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

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

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

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

線形グラデーション

複数カラーの指定

カンマで区切ることで、中間のカラーを増やすことができます。色数の制限はありません。
カラーの指定は、カラーコードrgba()rgb()transparentなどが利用できます。

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

各色の開始位置の変更

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

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

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

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

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

まとめ

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

広告

 - HTML・CSS