更新してないのに毎日一定のpvがあるのはボクの人徳だと自負しております下山ですどーもー。
グラデーションて面倒くさいですよねー。
でも男にはバリっとおぼえて「どうだオレのグラデーション！ステキだろ！」と愛しいあの人へ小声でささやかなきゃいけない時があるんです。変態です。
ただこいつ「オマエはまだ認めない！」な状態なのでベンダープレフィックスが必要です。
まずかデモでも
6パターンのグラデーションデモを用意しました。IEは10のみです。
線形グラデーション
linear-gradientを使うわけですがbackgroundもしくわbackground-imageで指定してあげないといけないようです。
線形グラデーションサンプル
.grade01 {
background: -webkit-linear-gradient(top,#dd5e89 0%,#f7bb97 100%);
background: -moz-linear-gradient(top,#dd5e89 0%,#f7bb97 100%);
background: linear-gradient(top,#dd5e89 0%,#f7bb97 100%);
}
.grade02 {
background: -webkit-linear-gradient(left,#dd5e89 0%,#f7bb97 100%);
background: -moz-linear-gradient(left,#dd5e89 0%,#f7bb97 100%);
background: linear-gradient(left,#dd5e89 0%,#f7bb97 100%);
}
.grade03 {
background: -webkit-linear-gradient(45deg,#dd5e89 0%,#f7bb97 100%);
background: -moz-linear-gradient(45deg,#dd5e89 0%,#f7bb97 100%);
background: linear-gradient(45deg,#dd5e89 0%,#f7bb97 100%);
}
まずはベンダープレフィックスですが-webkit-は「-webkit-gradient」というのもありましたが、これはそもそも古いので省きました。
Safari4.0とはchrome4.0とかいないでしょ？ってことで。
-moz-もfirefoxは早い段階でlinear-gradientを実装しているのでいらないかなーと思うんですがなんとなく残してますw
実際の中身の解説です。
background: linear-gradient(top,#色 位置,#色 位置); top部分：top,bottom,right,角度(deg)があります。 位置は省略可
線形グラデーションは比較的簡単なんです。
円形グラデーション
円形グラデーションはプロパティの単語が難しい！
なので先に中身を…
background: radial-gradient(中心点,形 大きさ？,#色 位置,#色 位置); 中心点：center leftなど 形：circle(円)かellipse(楕円) 大きさ↓
大きさって表現があってるのか疑問ですが要はこういうことです。
closest-side→グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に（circle の場合）、またはその中心から最も近い縦と横の辺に（ellipse の場合）内接します。
closest-corner→グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
farthest-side→形状がその中心から最も遠い辺（または縦と横の辺）に接することを除いて closest-side と同じです。
farthest-corner→グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。
MDN様を参考に原文まま転載(問題あるときはご連絡ください info@makurazaki.info)
円形グラデーションサンプル
.grade04 {
background: -webkit-radial-gradient(center,circle cover,#e9d362 0%,#333333 100%);
background: -moz-radial-gradient(center,circle cover,#e9d362 0%,#333333 100%);
background: radial-gradient(center,circle cover,#e9d362 0%,#333333 100%);
}
.grade05 {
background: -webkit-radial-gradient(left,circle farthest-corner,#e9d362 0%,#333333 100%);
background: -moz-radial-gradient(left,circle farthest-corner,#e9d362 0%,#333333 100%);
background: radial-gradient(left,circle farthest-corner,#e9d362 0%,#333333 100%);
}
.grade06 {
background: -webkit-radial-gradient(center,ellipse contain,#e9d362 0%,#333333 100%);
background: -moz-radial-gradient(center,ellipse contain,#e9d362 0%,#333333 100%);
background: radial-gradient(center,ellipse contain,#e9d362 0%,#333333 100%);
}まとめ
ちょっと面倒ですけど知ってるとCSSの使い道が広がりますね。でもIEは10のみですからね！
