Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】変わった水玉模様 4種!

 どうも!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>

 

 

 

 

 

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

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