今回はChatGPTで木目調の背景を作ってみました。
<div style="background: repeating-linear-gradient(45deg, #d2b48c, #d2b48c 10px, #f5deb3 10px, #f5deb3 20px);
padding: 20px; border-radius: 10px;">
<p>木目調のストライプ柄を使ったデザインです。シンプルながら木の質感を表現しています。</p>
</div>
木目調のストライプ柄を使ったデザインです。シンプルながら木の質感を表現しています。
このままだと文章が見にくいので、真ん中を透過させてみます。
<div style="background: repeating-linear-gradient(45deg, #d2b48c, #d2b48c 10px, #f5deb3 10px, #f5deb3 20px); padding: 20px; border-radius: 10px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
縦ストライプの木目調
<div style="background: repeating-linear-gradient(90deg, #d19a6b, #d19a6b 10px, #c68b57 10px, #c68b57 20px); padding: 20px; margin: 20px; border: 1px solid #a77c58; border-radius: 10px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
横ストライプの木目調
<div style="background: repeating-linear-gradient(0deg, #c4a78e, #c4a78e 10px, #b69e7f 10px, #b69e7f 20px); padding: 20px; margin: 20px; border: 1px solid #9b7f66; border-radius: 10px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>
横ストライプの木目調が一番木の板っぽい雰囲気があります。
枠内で改行したいときはshift+Enterキーで。
どんな背景でも、透過カラーを使うと文字部分がみやすくなって便利ですね!