linear-gradient(角度か方向, 開始する色, 終了する色);で線形グラデーションを指定することができます。
指定する色は3色以上にすることも可能です。
<p>タグのボックスで使用例を挙げてみます。
グラデーションの角度や方向は以下の通り。
角度や方向 |
説明 |
to bottom 180deg |
上から下 |
to top 0deg |
下から上 |
to right 90deg |
左から右 |
to left 270deg |
右から左 |
角度45度、最初は白色ではじまり最後は黒色に変化しています。
【ブラウザ表示】
角度45度
ソース
<p class="senkei_gbox">角度45度</p>
外部ファイル
p.senkei_gbox {
padding:10px;
background: linear-gradient(45deg, white, black);
}
<body>~</body>に直接記入する場合
<p style="padding:10px; background:linear-gradient(45deg, white, black); ">角度45度</p>
■ 単色グラデーション
この例では角度0度、0~49%は白色、49%~50%は白色から青色へ、50%~51%は青色から白色へ、51%~100%は白色のように指定すると1本の線のように表示されます。
【ブラウザ表示】
角度0度の単色グラデーション
ソース
<p class="senkei_gbox2">角度0度の単色グラデーション</p>
外部ファイル
p.senkei_gbox2{
width:200px;
height:200px;
background:linear-gradient(0deg, white 49%, blue 50%, white 51%);
}
<body>~</body>に直接記入する場合
<p style="width:200px; height:200px;background:linear-gradient(0deg, white 49%, blue 50%, white 51%);">角度0度の単色グラデーション</p>
■ 集中線グラデーション
linear-gradient()プロパティをカンマで区切り複数指定することもできます。開始色と終了色を透明にし
上の例と同じように指定すると4本の単色の線が交わり集中線のようなグラデーションになります。
2番目以降のlinear-gradientで開始色、終了色がtransparentではなくwhiteを指定した場合は1本の線しか表示
されません。
【ブラウザ表示】
集中線グラデーション
ソース
<p class="senkei_gbox3">集中線グラデーション</p>
外部ファイル
p.senkei_gbox3{
width:200px;
height:200px;
background:linear-gradient(-45deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(45deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(0deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(180deg, transparent 49%, blue 50%, transparent 51%),
linear-gradient(90deg, transparent 49%, blue 50%, transparent 51%);
}
<body>~</body>に直接記入する場合
<p style="width:200px; height:200px;background:linear-gradient(-45deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(45deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(0deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(180deg, transparent 49%, blue 50%, transparent 51%),linear-gradient(90deg, transparent 49%, blue 50%, transparent 51%);">集中線グラデーション</p>
■ その他の項目
・
円形グラデーションを指定する
・
繰り返しの線形グラデーションを指定する
・
繰り返しの円形グラデーションを指定する
スタイルシート一覧のページに戻る
|