円錐のグラデーションを極めてみる
こんにちは。なかしまぁ先生です。
今日は、グラデーションの中でちょっとおもしろい円錐のグラデーション(conic-gradient)をご紹介します。ブラウザ対応状況はこちら(IEは対象外です)
1.テンプレートファイルを作成してみる
ではまず、練習用のテンプレートファイルを準備しましょう
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
<style>
div{
/*枠*/
border:1px solid gray;
/*真中揃*/
position: absolute;
margin: auto;
top:0px;bottom:0px;right:0px;left:0px;
width:300px;
height:300px;
}
#conic {
/*ここに追加する*/
}
</style>
</head>
<body>
<div id="conic"></div>
</body>
</html>
2.円錐グラデーションを記述してみる
では、#conicに円錐グラデーション「conic-gradient()」のCSSを記述しましょう。丸括弧の中は表示する色で、時計の12時の位置から時計回りでグラデーションになります。
#conic {
background:conic-gradient(
white,
black
);
}
完了です。
でも、円錐っぽくないですね。
3.色を追加してみる
丸括弧の中に色を追加してみましょう。
#conic {
background:conic-gradient(
black,
white,
black
);
}
富士山を上から見たようなグラデーションになりました。これでやっと円錐っぽくなりましたね。
4.色を変更して違うものを作ってみる
ではこれだけではいまいち何に使うことができるか困ってしまいます。ですので「あるもの」を作りましょう。そのための準備に以下のように色を変更してみます。
#conic {
background:conic-gradient(
pink,
skyblue,
lime,
yellow
);
}
5.範囲を指定してみる
CSSのグラデーションでは、色の中心位置を指定する事ができます。開始地点を0%、終了地点を100%として、位置を%で指定します。
#conic {
background:conic-gradient(
pink 40%,
skyblue 70%,
lime 90%,
yellow 100%
);
}
でもまだ使いみちがわかりませんね。
6.グラデーションをなくしてみる
pinkを開始地点から40%の地点まで、skyblueは40%から70%まで、limeは70%から90%まで、yellowは90%から終了地点までに変更するには次のように記述します。
#conic {
background:conic-gradient(
pink 0% 40%,
skyblue 40% 70%,
lime 70% 90%,
yellow 90% 100%
);
}
お、何かに使えそうですね。
7.円グラフを作ってみる
では、「border-radius」で角を丸めてみましょう。
#conic {
background:conic-gradient(
pink 0% 40%,
skyblue 40% 70%,
lime 70% 90%,
yellow 90% 100%
);
border-radius:50%;
}
円錐のグラデーションで「円グラフ」を作ってみました。
8.他にも何か作ってみる
では、他になにができるでしょうか。「conic-gradient」の前に「repeating-」をつけて繰り返してみましょう。
#conic {
background:repeating-conic-gradient(
black 0% 25%,
green 25% 50%
) ;
}
黒と緑が繰り返し表示されました。
9.背景の大きさを変えてみる
背景の大きさを「background-size」で変更してみましょう。横の倍率と縦の倍率を50%にします。
#conic {
background:repeating-conic-gradient(
black 0% 25%,
green 25% 50%
) ;
background-size:50% 50% ;
}
今流行の格子模様（チェッカー）ができましたね。
10.数値をとんでもなく変えてみる
いろいろといじってみましょう。
#conic {
background:repeating-conic-gradient(
black 0% 0.1%,
white 0.1% 0.2%
);
}
なんだか不思議な模様ですね。モアレのいたずらですね。なかしまぁ先生はこういうのが大好きです（笑）
11.背景を重ねてみる
では、最後に、円錐と円形のグラデーションを重ねてみましょう。重ねるためには、backgroundプロパティの値として、ふたつのグラデーションの値をカンマ「,」で並べます。「radial-gradient()」は円形のグラデーション値です。そしてCSSを「ブレンドモード」にすることで重ね合わせが可能です。
#conic {
background:
repeating-conic-gradient(
skyblue -5% 5%,
white 5% 15%
),
radial-gradient(white,black);
background-blend-mode:color;
}
面白い模様ができました。
いろいろと値を変えて楽しんでみましょう。
【PR】
①初心者向けHTML5対面教室（東京・大阪）
②HTML5の検定にチャレンジ！（オンライン）