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




更新してないのに毎日一定の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のみですからね!

タイトルとURLをコピーしました