戻る
グラデーションの角度
linear-gradient()ではグラデーションの角度を指定することもできます。角度の値は1つ目のパラメータとして指定します。たとえば「0deg」と指定すると、左から右に向かって変化するグラデーションとなります。
article section {…略…
background: -webkit-linear-gradient(0deg, #ffff00 0%, #ff6600 100%);
background: -moz-linear-gradient(0deg, #ffff00 0%, #ff6600 100%);
background: -o-linear-gradient(0deg, #ffff00 0%, #ff6600 100%);
background: -ms-linear-gradient(0deg, #ffff00 0%, #ff6600 100%)}
グラデーションを左から右の向きで表示したもの。
degはCSS3で追加された角度の単位です。マイナスの値で指定することもできます。なお、標準と同じように上から下の向きに変化させるためには、角度を「270deg」と指定します。
-webkit-gradient()で左から右に変化させるためには、2つ目と3つ目のパラメータをそれぞれ「left top」、「right top」と指定します。
article section {…略…
background: -webkit-gradient(linear, left top, right top, from(#ffff00), to(#ff6600));
…略…}
また、-ms-filterでは、GradientTypeパラメータの値を「1」とすることで、左から右に変化させることができます。
<!--[if lt IE 10]>
<style>
article section
{filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffff00',endColorstr='#ff6600');
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#ffff00',endColorstr='#ff6600')"}
</style>
<![endif]-->
-ms-filterのGradientTypeのパラメータで指定できる値は「0」または「1」となっており、「上から下」、または「左から右」の向きでのみグラデーションを表示することが可能です。