今回はグラデーション＋立体の背景を使ってみたいと思います。
参考にした記事はこちら！
グラデーション＋立体の背景
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #f98289 inset, 5px 5px 0 #cecece; font-size: 100%;"> ここに本文を入れます♪ </div>
色を変えてバリエーションを作ってみます。
オレンジ系
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #ffc68e inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
水色系
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #99ffff inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
緑系
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #9eff9e inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
紫系
<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #cc99ff inset, 5px 5px 0 #cecece; font-size: 100%;">ここに本文を入れます♪</div>
このコードをHTML編集画面に貼り付けるとこうなります↓
ちょっと凝った感じの背景になりますね！
