木目調の背景 透過カラー

今回は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キーで。

どんな背景でも、透過カラーを使うと文字部分がみやすくなって便利ですね！