はてなブログカスタマイズを0から学ぶ

無料版はてなブログのカスタマイズを学んでいくブログ

水玉の背景

 

今回は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>

ここに文章

 

白地に水玉だと文字が見やすくて良いかも。

 

borderbackground-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>

ここに文字

 

赤い部分が透過のコード。

 

透過カラーはこちらを参考に。

arts-factory.net