今回は少し凝ったおしゃれな囲み枠を使ってみたいと思います。
<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px 5px; padding: 10px; color: #333333; background: #ffe0f0; box-shadow: 0 0 0 5px #ffe0f0; border: dashed 2px #ffffff;">ここに本文</div>
このコードをHTML編集画面にはりつけます。
そうするとこうなります。
ここに本文
色を変えてみます。
#ffe0f0の部分を変えていきます。
#ffe0b5を使うとこんな感じ。
ここに本文
#c3dcbeを使うとこんな感じ。
ここに本文
#e5b7beを使うとこんな感じ。
ここに本文
うーん、かわいい！
もう一つ背景を濃くして、文字を白くした囲み枠を使ってみます。
<div style="color: #fff; background: #f08080; padding: 20px; border: 1px dashed rgba(255,255,255,0.8); box-shadow: 0 0 0 5px #f08080; -moz-box-shadow: 0 0 0 5px #f08080; -webkit-box-shadow: 0 0 0 5px #f08080; ; font-size: 100%;">ここに本文</div>
このコードをHTML編集画面に貼り付けるとこうなります。
コード長いですね・・・
ここに本文
色を変えてみます。
#f08080の部分なので、変えるところが４か所ありますね。
#904644を使うとこんな感じ。
ここに本文
あ、４個目を変えるのを忘れたら思いがけず面白い枠ができました。↑
4個目のカラーコードは外側の枠なんですね！
ちゃんと全部変えるとこんな感じ。
ここに本文
#4a551eを使うとこんな感じ。
ここに本文
#b0941eを使うとこんな感じ。
ここに本文
なんかかっこよくなりそうです！
参考にさせていただいた記事はこちら！
