柄ものCSS。
こんばんは、さじです。
柄物のパターンって結構使いますよね。
水玉の変形で柄作れるんじゃない？と思った自分。
完全に遊びに走っています。
ハート柄。
スイーツフェア
<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: pink; font-size: 40px; font-weight: bold; text-align: center; color: gray; background-image: radial-gradient(circle 20px at 20% 20%,white 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,white 25%,transparent 0%),radial-gradient(circle 20px at 25% 25%,white 25%,transparent 0%),radial-gradient(circle 20px at 35% 25%,white 25%,transparent 0%),radial-gradient(circle 20px at 30% 30%,white 25%,transparent 0%);">スイーツフェア</div>
色違いだとまた、違った印象ですね。
いちごスイーツ
<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #ff2142; font-size: 40px; font-weight: bold; text-align: center; color: white; background-image: radial-gradient(circle 20px at 20% 20%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 25% 25%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 35% 25%,#ff8295 25%,transparent 0%),radial-gradient(circle 20px at 30% 30%,#ff8295 25%,transparent 0%);">いちごスイーツ</div>
位置を変えると動物っぽくなりました。
動物園とか、ペットとか？
どうぶつえん
<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #c4ff99; font-size: 40px; font-weight: bold; text-align: center; color: #8a6545; background-image: radial-gradient(circle 20px at 20% 20%,yellow 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,yellow 25%,transparent 0%),radial-gradient(circle 40px at 30% 35%,yellow 25%,transparent 0%);">どうぶつえん</div>
ねずみの国とか。
ねずみのくに。
<div style="width: 300px; height: 100px; padding: 1em; border-radius: 25px; background-size: 50px 50px; background-color: #000000; font-size: 40px; font-weight: bold; text-align: center; color: white; background-image: radial-gradient(circle 20px at 20% 20%,red 25%,transparent 0%),radial-gradient(circle 20px at 40% 20%,red 25%,transparent 0%),radial-gradient(circle 20px at 30% 35%,red 25%,transparent 0%);">ねずみのくに。</div>
自分で作っておいてなんですが
なんかひと昔前の包装紙みたいですね（笑）。
さじ
7/25追記
iPhone8（自機）の画面幅に合わせてwidthを400px→300pxに変更しました。width:autoで自動幅設定が可能ですがcircleでpx指定を行っているため柄が崩れる可能性が高いです。今後の検討課題です。
7/25追記(2)
ＬＳＳさん（id:little_strange）が簡単に模様が作れるツールを作ってくださいました！↓↓↓
7/26追記（解決したら消します）
テスト中です。
iPhone表示できたコードです。↓%表記しています。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 10px at 50% 26%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 26% 42%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 74% 40%,#ffffffff 50%,transparent 0%),radial-gradient(circle 6px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 36% 70%,#ffffffff 50%,transparent 0%),radial-gradient(circle 10px at 66% 70%,#ffffffff 50%,transparent 0%);"> </div>
iPhone表示できなかったコードです。↓px表記しています。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 5px at 25px 13px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 13px 21px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 37px 20px,#ffffffff 5px,transparent 5px),radial-gradient(circle 3px at 25px 25px,#ffffffff 3px,transparent 3px),radial-gradient(circle 5px at 18px 35px,#ffffffff 5px,transparent 5px),radial-gradient(circle 5px at 33px 35px,#ffffffff 5px,transparent 5px);"> </div>
7/26追記(2)検証中です。
新たなテストです。
#ffffffのあとが50％だとiPhone表示されます。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%);"> </div>
#ffffffのあとが100％。↓iPhone表示されず。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%);"> </div>
#ffffffのあとが90％。↓iPhone表示されますが丸に黒っぽい線がつきます。
#ffffffのあとが50％だとiPhone表示されます。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 50%,transparent 0%);"> </div>
#ffffffのあとが100％。↓iPhone表示されず。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 100%);"> </div>
7/26追記(3)引き続き検証中です。
#ffffffff 100%,transparent 0% 表示されずです。
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 100%,transparent 0%);"> </div>
#ffffffff 90%,transparent 0% 表示されます！
<div style="background-color: lightblue; width: 300px; height: 200px; background-size: 50px 50px; background-image: radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%),radial-gradient(circle 8px at 50% 50%,#ffffffff 90%,transparent 0%);"> </div>
#ffffffff 99%,transparent 0% 黒線なし！表示されてます！
そして、意図した大きさになりました！
