【CSS】CSSでチョコレートケーキを描いてみました【backgroundプロパティ】

　どうも！LSSです！！

実用性はまったく無いと思いますが…CSSのbackgroundプロパティで「チョコレートケーキ」を描いてみました。

チョコレートケーキ

ChocoCake

コード

<div style="
box-sizing: content-box;
width: 100px;
height: 100px;
background:
conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px
, radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px
, linear-gradient(180deg,#2c120700 48%,#2c1207 52% 63%,#85660f 64% 72%,#2c1207 73% 82%,#85660f 83% 90%,#2c1207 91%) 0px 0px;
text-shadow: 1px 1px 0 #ffffff;
">ChocoCake</div>

3つのgradientを重ねています

 

 

 

位置が分かるように枠線で囲み、３つのgradientを個別に描くと↑のようになります。

左から、conic-gradient、radial-gradient、linear-gradient と３種類のgradientをフル活用！

conicの「右にスキマがある」のや、radialの「円の右上だけを切り出したような」のは、まず「at」で中心位置をずらして描画。

 

 

↑conicのほうは「at 13px 50px」、radialは「at -86px 100px」で描きました。

そして、今度は描画位置をずらす事で、

 

 

の位置に持っていっています。

コードでいうと、↓この部分

background:
conic-gradient(from 60deg at 13px 50px,#372006 29.9deg,#37200600 30deg) -13px 0px
, radial-gradient(100px 100px at -86px 100px,#372006 99%,#37200600 100%) 86px -50px

（青文字部分は「background-position」と同じ指定です。）

あとがき

以前からちょこちょこ使っていましたが、conic-gradientやradial-gradientについては「at で中心位置を指定してから、background-positionで実際の配置を調節する」事で、部分的に切り出したような表現が使えます^^

これを使いこなせると、CSSお絵描きの幅がとても広がりますね！

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^