どうも!LSSです!!
今回は例のやつを使って、水玉模様?を4種ほど作ってみました!
コードもつけていますので、使いたいものがあったらご自由にコピペしてください^^
改変も可です!
ずっと見ていると不思議な感じになりませんか?
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 5px at 11% 11%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 11% 39%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 39% 11%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 39% 39%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 75% 25%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 61% 61%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 61% 89%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 89% 61%,#ffffffff 99%,transparent 0%),radial-gradient(circle 5px at 89% 89%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 25% 75%,#ffffffff 99%,transparent 0%);"> </div>
昨日の斜め格子をもうちょっと自然に繋がる感じに
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 3px at 8% 8%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 25% 25%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 42% 42%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 42% 8%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 8% 42%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 58% 58%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 75% 75%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 92% 92%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 92% 58%,#ffffffff 99%,transparent 0%),radial-gradient(circle 3px at 58% 92%,#ffffffff 99%,transparent 0%);"></div>
くまちゃんが居るなら、うさぎちゃんも居たっていいじゃない
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 9px at 25% 33%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 15% 20%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 16% 10%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 34% 20%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 35% 10%,#ffffffff 99%,transparent 0%),radial-gradient(circle 9px at 75% 83%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 65% 70%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 66% 60%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 84% 70%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 85% 60%,#ffffffff 99%,transparent 0%);"> </div>
千成瓢箪(せんなりひょうたん)!
<div style="background-color:lightblue;width:300px;height:200px;background-size:50px 50px;background-image:radial-gradient(circle 8px at 32% 32%,#ffffffff 99%,transparent 0%),radial-gradient(circle 4px at 18% 18%,#ffffffff 99%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 99%,transparent 0%);"></div>
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^