【CSS】涼しげな背景グラデーション３種
どうも！LSSです！！
毎日あっついですね！
ブログの中だけでも、気持ち涼しくなるようなグラデーションを３種、考えてみました^^
普通に四角が並んでいる感じ
普通に四角が並んでいる感じ。
コード
<div style="background-image: linear-gradient(135deg,#bbbbff,#eeeeff,#bbbbff); background-size: 80px 80px; padding: 1em;">
普通に四角が並んでいる感じです。<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
赤文字部分を好きな内容に書き換えて使用できます^^
斜めに幾重にも筋が走ってる感じ
斜めに幾重にも筋が走ってる感じ。
コード
<div style="background-image: repeating-linear-gradient(125deg,#bbbbff 0%,#eeeeff 3%,#bbbbff 6%); padding: 1em;">
斜めに幾重にも筋が走ってる感じ。<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
赤文字部分を好きな内容に書き換えて使用できます^^
この背景を使用する枠の幅によって、筋の太さが変化してしまうため、青文字部分の数値を大きくしたほうがいい場合もあるかもです。
放射状に波うってる感じ
放射状に波うってる感じ。
コード
<div style="background-image: repeating-radial-gradient(circle at -40% -40%,#bbbbff 0%,#eeeeff 3%,#bbbbff 10%); padding: 1em;">
放射状に波うってる感じ。<br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
赤文字部分を好きな内容に書き換えて使用できます^^
こちらも、この背景を使用する枠の幅によって、波の太さが変化してしまうため、青文字部分の数値を大きくしたほうがいい場合もあるかもです。
おまけ：記事限定で背景を変更
この記事のように、臨時で背景を変更するのには、
<style><!--
body{background-image:repeating-linear-gradient(125deg,#bbbbff 0%,#eeeeff 3%,#bbbbff 6%);}
--></style>
↑こんなコードを入れています。
これは前にもやってましたねｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
