小賢しいけどちょっと便利なCSSグラデーション


スポンサーリンク

css3 でやる方法。
ここを直接どうぞ
 
問題は、これをタグ項目に設定してしまうとクリアできなくなるってところ。
background-image: -webkit-linear-gradient(#ddd, #bbb);
こういうのをクリアさせるにはどうするんだろう?
background-image: none; ではクリアされない。
 
もっとも FireFox や Mozilla系ブラウザ では、うにゃうにゃってことだから、
基本的につかっちゃだめなんだよね。
グラデーション使うときは、だまって画像を作るのもありじゃないかな?
 
 
角度を省略すると上から下(0度から180度)、縦方向に色が変化する。
background: linear-gradient({角度,}開始の色, 次の色・・・); 角度は deg
 
<p class="grad">グラデサンプル</p>
<p class="grad90">左から右グラデサンプル</p>
<p class="gradgrad">何色か交代グラデサンプル</p>

<style type="text/css">
/* グラデサンプル CSS */
p.grad {
width:160px; height:80px;
background: linear-gradient(white, gray);
}
/* 左から右グラデサンプル CSS */
p.grad90 {
width:160px; height:80px;
background: linear-gradient(90deg,white, gray);
}
/* 何色か交代グラデサンプル CSS */
p.gradgrad{
width:160px; height:80px;
color:#fff;
background: linear-gradient(90deg,red,green,white,gray,yellow);
}
</style>
 

グラデサンプル

左から右グラデサンプル

何色か交代グラデサンプル

スポンサーリンク