今回はChatGPTを使って水玉の背景を作ってみました。
ピンクの水玉
<div style="background: radial-gradient(circle, #ffccff 20%, transparent 20%) 0 0,
radial-gradient(circle, #ffccff 20%, transparent 20%) 25px 25px;
background-color: #ffffff;
background-size: 50px 50px;
padding: 20px; border-radius: 10px;">
<p><strong>ここに文章</strong></p>
</div>
ここに文章
青い水玉
<div style="background: radial-gradient(circle, #add8e6 20%, transparent 20%), radial-gradient(circle, #add8e6 20%, transparent 20%);
background-size: 50px 50px; background-position: 0 0, 25px 25px; padding: 20px; border-radius: 10px;">
<p><strong>ここに文章</srong></p>
</div>
ここに文章
白地に水玉だと文字が見やすくて良いかも。
borderやbackground-colorを追加すれば、枠線をつけたりや背景色を変えたりできそうですね。
<div style="background: radial-gradient(circle, #add8e6 20%, transparent 20%), radial-gradient(circle, #add8e6 20%, transparent 20%); background-size: 50px 50px; background-position: 0 0, 25px 25px; padding: 20px; border-radius: 10px; border: 3px solid #e6e6fa; background-color: #ffffea;">
<p>ここに文章</p>
</div>
ここに文章
よりかわいらしいのができました！
さらに真ん中を透過して文字を見やすくしてみます。
<div style="background: radial-gradient(circle, #add8e6 20%, transparent 20%), radial-gradient(circle, #add8e6 20%, transparent 20%); background-size: 50px 50px; background-position: 0 0, 25px 25px; padding: 20px; border-radius: 10px; border: 3px solid #e6e6fa; background-color: #ffffea;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
赤い部分が透過のコード。
透過カラーはこちらを参考に。
