【css】 conic-gradient() 円グラフや市松模様がすぐに実現する最強のプロパティー

今回は新しいグラデーション手法
conic-gradient()関数について紹介しようと思います。

2018年9月にリリースされた関数なのですが、conicというのが円錐という意味らしく
円錐グラデーションと呼ばれるそうです。

なので、

linear-gradient()関数： 直線状のグラデーション
radial-gradient()関数： 放射状のグラデーション

今までの二つのグラデーションに追加して

conic-gradient()関数： 円錐状のグラデーション

が追加されます。
cssオタクとしてはすごくそそられますよね。

集中線や市松模様といった表現が手軽に実装できます。
順を追って説明していきます。

せっかく三種類のグラデーションがあるので順にみていきます。

はいどーん。

.grad {
  background-image: linear-gradient(
    to right,
    hsl(327deg 100% 92%),
    hsl(232deg 100% 72%)
  );
}

f:id:okinawanpizza:20201010180116p:plain

直線状グラデーションです。

漂うリトマス感ですね。

次は円錐状グラデーション

f:id:okinawanpizza:20201010180913p:plain

ん、真ん中に炭酸水吹きかけたのかな？

ということでお待ちかねの円錐状グラデーション
f:id:okinawanpizza:20201010181717p:plain

リトマス紙、、、ちょっと誤って真ん中に折り目つけちゃいましたね、、

radial-gradient()で使える数字と似通っていて角度、色、の調節が可能です。

・回転数(どこからスタートするか)    
・中心地点(要素内の中心の座標)

加えて上記の二つも調節できます。

.grad {
background: conic-gradient( 
    from 0.375turn at 30% 30%,
    hsl(327deg 100% 92%),
    hsl(232deg 100% 72%)
  );
}

f:id:okinawanpizza:20201010185453p:plain

こういった感じです。

市松模様ができたり(ちょっと色を変えていますが)

f:id:okinawanpizza:20201010190155p:plain

他にもcodepenでレーダーっぽい表現をしている方がいたり、、

とにかく、このconic-gradient()触っていたら
もっとcssで遊びたくなってワクワクするのでぜひ笑

tamakipedia