サイケデリック生きもの、CSS。

こんばんは、さじです。

サイケデリックカラー。

蛍光色に近い補色を使ったりすると

ヒッピー感が出て雰囲気がガラッと変わります。

CSS模様という名の、お絵かきタイムです。

予告通り、生き物シリーズを作っていたんですが

普通の色を充てるとどうも柄が生きないというか

気持ち悪くなるのでサイケカラーにヘルプ頼みました。

需要無さそうですがコード要ります？（笑）。

ちょうちょ

 

 <div style="background-color: #800080; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 2px at 47% 21%,#FFFF00 99%,transparent 0%),radial-gradient(circle 2px at 53% 21%,#FFFF00 99%,transparent 0%),radial-gradient(circle 10px at 34% 43%,#FFFF00 99%,transparent 0%),radial-gradient(circle 10px at 66% 43%,#FFFF00 99%,transparent 0%),radial-gradient(circle 7px at 40% 67%,#FFFF00 99%,transparent 0%),radial-gradient(circle 7px at 60% 67%,#FFFF00 99%,transparent 0%),radial-gradient(circle 8px at 50% 60%,#FFFF00 99%,transparent 0%);"> </div>

てんとうむし

 

 <div style="background-color: red; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 5px at 50% 19%, black 99%,transparent 0%),radial-gradient(circle 3px at 50% 50%, red 99%,transparent 0%),radial-gradient(circle 3px at 64% 35%,red 99%,transparent 0%),radial-gradient(circle 3px at 36% 35%, red 99%,transparent 0%),radial-gradient(circle 3px at 28% 54%, red 99%,transparent 0%),radial-gradient(circle 3px at 71% 54%, red 99%,transparent 0%),radial-gradient(circle 3px at 60% 70%, red 99%,transparent 0%),radial-gradient(circle 3px at 40% 70%, red 99%,transparent 0%),radial-gradient(circle 17px at 50% 50%,black 99%,transparent 0%);"> </div>

ふんころがし

 

 <div style="background-color: #d0ff00; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 6px at 50% 78%,#ff36d0 99%,transparent 0%),radial-gradient(circle 13px at 50% 50%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 30% 68%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 31% 74%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 25% 56%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 20% 50%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 18% 44%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 17% 37%,#ff36d0 99%,transparent 0%),radial-gradient(circle 3px at 31% 28%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 32% 22%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 38% 18%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 44% 15%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 70% 68%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 69% 74%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 75% 56%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 80% 50%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 82% 44%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 83% 37%,#ff36d0 99%,transparent 0%),radial-gradient(circle 3px at 69% 28%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 68% 22%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 62% 18%,#ff36d0 99%,transparent 0%),radial-gradient(circle 2px at 56% 15%,#ff36d0 99%,transparent 0%),radial-gradient(circle 4px at 50% 10%,#ff36d0 99%,transparent 0%);"> </div>

ひょう柄も作ってたんですが、円だけで表現するの

難しいですね。

こうしたらいいかもというアイデアが沸いたら

リベンジしてみます。これは天然のサイケ。

 

 <div style="background-color: #ffff00; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 5px at 25% 25%,#800000 99%,transparent 0%),radial-gradient(circle 8px at 38% 70%,#800000 99%,transparent 0%),radial-gradient(circle 6px at 78% 35%,#800000 99%,transparent 0%),radial-gradient(circle 3px at 85% 88%,#800000 99%,transparent 0%),radial-gradient(circle 9px at 25% 25%,#000000 99%,transparent 0%),radial-gradient(circle 12px at 43% 70%,#000000 99%,transparent 0%),radial-gradient(circle 10px at 73% 35%,#000000 99%,transparent 0%),radial-gradient(circle 6px at 85% 88%,#000000 99%,transparent 0%);"> </div>

目がチカチカ。

ファッションでいうならばバックに結くスカーフ的に

ポイント遣いにでもいかがでしょうか（笑）。

生き物のヒントをいただきましたのは

佐馬鷹さん (id:coatsofarms) の紋章イラストです。

デフォルメイラストにもぴったりな水玉制作。

楽しすぎる（笑）。

。。次回こそ、実用性のある物を。

さじ

こちら使わせていただいてます↓