CSS3-グラデーション-


いちいちggrのが面倒なので、ここに備忘録として記載。

CSS3でグラデーションの背景をつける場合です。

■linear-gradientの使い方
.btn {
      background: linear-gradient(開始位置,開始色,終了色);
      background: -moz-linear-gradient(開始位置,開始色,終了色);
      background: -webkit-gradient(グラデーションの種類,開始位置,終了位置,from(開始色),to(終了色))
}

…operaは今後webkit系になっていくハズなんで割愛。
そしてwebkit系のベンダープレフィックスの記述がめんどくさい。

◎開始位置(・終了位置)
・通常のヤツと-moz-は省略可能。省略したらtop扱い。
記載する場合はtop,left,right,bottomから選択。あるいは角度で45degでもOK。
終了位置も開始位置に応じて、ある程度勝手に決めてくれる(決まるw)
・webkitは開始も終了も省略不可。
しかも面倒なことに記載方法が違う。top left,bottom left,のように、位置を詳細に書かないといけない。
top left・bottom left・top right・bottom rightの4つから選ぶ・・・。あるいは角度。

他にももっと細かく色を区切ったりすることができるらしいけど、そこまでやることは稀。
やる場合はggってくださいw

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.