おしゃれな背景 ストライプ枠 透過カラー

今回はおしゃれな背景を使ってみたいと思います。

参考にした記事はこちら！

yunico-fluffylife.com

ストライプの背景

<div style="border: none; background: repeating-linear-gradient(-45deg, #ECE8E1, #ECE8E1 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;"><div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%;  padding: 10px;">ここに文字</div></div>

このコードをHTML編集画面に貼り付けるとこうなります↓

ここに文字

-45degがストライプの角度で、「-」を消すとストライプが逆になるそう。

またストライプやチェックを表現するための透過カラーというものがあるらしい。

#ではなくrgba(数字,　数字,　数字,　数字)で表すんですね。

文字を入れる部分の背景が白っぽくなっていて見やすいです。

こちらの記事を参考に↓

arts-factory.net

色を変えてバリエーションを作ってみます。

ピンク系

<div style="border: none; background: repeating-linear-gradient(-45deg, #f5ecf4, #f5ecf4 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

オレンジ系

<div style="border: none; background: repeating-linear-gradient(-45deg, #fce4d6, #fce4d6 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

緑系

<div style="border: none; background: repeating-linear-gradient(-45deg, #bee0ce, #bee0ce 10px, #FFFFFF 10px, #FFFFFF 20px); padding: 15px;">
<div style="background-color: rgba(255, 255, 255, 0.8); border: none; width: 94%; padding: 10px;">ここに文字</div>
</div>

ここに文字

タイトルに使うのもよさそうですね！