[CSS3]いいかげんlinear-gradientとradial-gradientおぼえてグラデーションな四角でも書いてみようぜ。

更新してないのに毎日一定のpvがあるのはボクの人徳だと自負しております下山ですどーもー。

グラデーションて面倒くさいですよねー。
でも男にはバリっとおぼえて「どうだオレのグラデーション!ステキだろ!」と愛しいあの人へ小声でささやかなきゃいけない時があるんです。変態です。
ただこいつ「オマエはまだ認めない!」な状態なのでベンダープレフィックスが必要です。

まずかデモでも

6パターンのグラデーションデモを用意しました。IEは10のみです。

線形グラデーション

linear-gradientを使うわけですがbackgroundもしくわbackground-imageで指定してあげないといけないようです。

線形グラデーションサンプル

まずはベンダープレフィックスですが-webkit-は「-webkit-gradient」というのもありましたが、これはそもそも古いので省きました。
Safari4.0とはchrome4.0とかいないでしょ?ってことで。
-moz-もfirefoxは早い段階でlinear-gradientを実装しているのでいらないかなーと思うんですがなんとなく残してますw

実際の中身の解説です。

線形グラデーションは比較的簡単なんです。

円形グラデーション

円形グラデーションはプロパティの単語が難しい!
なので先に中身を…

大きさって表現があってるのか疑問ですが要はこういうことです。
closest-side→グラデーションの形状は、その中心から最も近いグラデーションボックスの辺に(circle の場合)、またはその中心から最も近い縦と横の辺に(ellipse の場合)内接します。
closest-corner→グラデーションの形状は、その中心から最も近いグラデーションボックスの頂点に接します。
farthest-side→形状がその中心から最も遠い辺(または縦と横の辺)に接することを除いて closest-side と同じです。
farthest-corner→グラデーションの形状は、その中心から最も遠いグラデーションボックスの頂点に接します。
MDN様を参考に原文まま転載(問題あるときはご連絡ください info@makurazaki.info)

円形グラデーションサンプル

まとめ

ちょっと面倒ですけど知ってるとCSSの使い道が広がりますね。でもIEは10のみですからね!

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク