どうも！LSSです！！
これまで、CSSのグラデーション（linear-gradient radial-gradient）で遊んできましたが…今日初めて知ってびっくり！
CSSのグラデーションは「もう１種類」あったようです！！
conic-gradientのテスト
コード
<style>
.conictest{
background-image:conic-gradient(#ff8888,#ffff88,#8888ff,#ff8888);
width:300px;
height:200px;
}
</style>
<div class="conictest">conic-gradient</div>
background-image:conic-gradient(#ff8888,#ffff88,#8888ff,#ff8888);
が、その書式で、( )の中に色を並べるのは linear-gradient や radial-gradient と同様ですね。
linear-gradientは一直線に、radial-gradientは円形で中央から外に向かってグラデーションしますが、この conic-gradient は扇形に展開します。
円グラフのような感じですね。
repeating-conic-gradient
linear-gradient や、 radial-gradient にもあったように、「repeating-」を付けたバージョンも存在します。
コード
<style>
.rpconictest{
background-image:repeating-conic-gradient(#ff8888,#ffff88,#8888ff,#ff8888 72deg);
width:300px;
height:200px;
}
</style>
<div class="rpconictest">repeating-conic-gradient</div>
最後に「72deg（72度）」で止める事で、その後が繰り返しになります。
１周が360degなので、72度だと5回繰り返す事になります。
という事は、こんな事もCSSで出来ちゃいますね！
コード
<style>
.rpconictest2{
background-image:
radial-gradient(circle at 50% 50%,#ffffffff 40%,#ffffff00 80%),
repeating-conic-gradient(black 4deg,white 5deg,white 9deg,black 10deg);/*白黒交互のconicの上に、白→透明なradial*/
width:300px;
height:200px;
padding-top:80px;/*上から80pxの余白で縦位置調整*/
text-align:center;/*左右中央寄せ*/
}
</style>
<div class="rpconictest2">な…なんだってー！？</div>
black 4deg,white 5deg,white 9deg,black 10deg
という短い範囲で白と黒を繰り返す conic-gradient を描画し、
#ffffffff 40%,#ffffff00 80%
という、白から透明に変化する radial-gradient をその上に重ねる事で、「中央を白抜きした集中線」のような効果になります^^
あとがき
手元の書籍には２種類しか載っていなかったので、てっきりその２種類だけなんだと思っていたら…これまで散々グラデーションで遊んできたのに、とビックリですｗ
この conic-gradient 、今日初めて存在を知りましたが…どっかでこんな感じのものを見た覚えがあるような？
と、過去記事を検索してみると、
↑に、スマホアプリを作る時のXMLでレイアウトを作る際に、そっちでは「sweep」という名前で同様のグラデーションがありました！
スマホアプリ用のXMLと、Web用のHTML+CSS、結構同じような事ができるんですね^^
今回、conic-gradientの存在を知ったのは、
のサイトからでした。
３種類のgradient（それぞれrepeating-もあるから６種類といってもいいかも）、組み合わせる事もできるので、さらに表現の幅がひろがりそうですね^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
