画像に替える
グラデーションを画像に替える方法
LSSさんの光の龍の作品から
コードの中の「background-image」の部分です。
background-repeat:no-repeat;
background-image:radial-gradient(farthest-side,#ffffff80 0%,#ffffff00 100%);
太字の部分↑が円形グラデーション（radial-gradient）なので、ここを画像に書き替えます。
url(”");に書き替えて、画像のURLを中に入れます。
background-repeat:no-repeat;
background-image:url("https://cdn-ak.f.st-hatena.com/images/fotolife/n/non704/20220810/20220810085928.png");
画像は入りましたが、画像を無理やり入れているので重なりが逆になります。
順番を書き換えます。
.stardragon div:nth-child(1){--d:0.1s;--sz:60px;}
.stardragon div:nth-child(2){--d:0.2s;--sz:56px;}
.stardragon div:nth-child(3){--d:0.3s;--sz:52px;}
.stardragon div:nth-child(4){--d:0.4s;--sz:48px;}
.stardragon div:nth-child(5){--d:0.5s;--sz:44px;}
.stardragon div:nth-child(6){--d:0.6s;--sz:40px;}
.stardragon div:nth-child(7){--d:0.7s;--sz:36px;}
.stardragon div:nth-child(8){--d:0.8s;--sz:32px;}
.stardragon div:nth-child(9){--d:0.9s;--sz:28px;}
.stardragon div:nth-child(10){--d:1s;--sz:24px;}
.stardragon div:nth-child(11){--d:1.1s;--sz:20px;}
.stardragon div:nth-child(12){--d:1.2s;--sz:16px;}
の部分の順番です。
.stardragon div:nth-child(12){--d:0.1s;--sz:60px;}
.stardragon div:nth-child(11){--d:0.2s;--sz:56px;}
.stardragon div:nth-child(10){--d:0.3s;--sz:52px;}
.stardragon div:nth-child(9){--d:0.4s;--sz:48px;}
.stardragon div:nth-child(8){--d:0.5s;--sz:44px;}
.stardragon div:nth-child(7){--d:0.6s;--sz:40px;}
.stardragon div:nth-child(6){--d:0.7s;--sz:36px;}
.stardragon div:nth-child(5){--d:0.8s;--sz:32px;}
.stardragon div:nth-child(4){--d:0.9s;--sz:28px;}
.stardragon div:nth-child(3){--d:1s;--sz:24px;}
.stardragon div:nth-child(2){--d:1.1s;--sz:20px;}
.stardragon div:nth-child(1){--d:1.2s;--sz:16px;}
画像のＵＲＬの調べ方はいろいろやり方ありますが、はてなフォトライフの画像を右クリックして「画像のアドレスをコピー」し、コードの「url(""):」の””の間で右クリック＞貼り付けです。
画像のサイズは大きくてもLSSさんのコードでサイズを変えてくれますが、正方形に近い方が画像の雰囲気を変えません。
背景色は黒になっていますが、background-color:black;のblackをwhiteなどの色に替えても（#81b9c3とカラーコードにしても）楽しいです。
＊他のコードもグラデーションの部分を画像に入れ替えるのは同じ方法です。
