ブログパーツ～枠(ボックスデザイン)編～

おはようございます。 近牡と申します。

各パーツを5種類ほどそろえていこうかと考えております。 今日からは枠(ボックスデザイン)をお世話になっているサルワカさんを 参考にやっていこうと思います。

付箋風デザイン

本文を入力

<div style="padding: 0.5em 1em; margin: 2em 0; color: #222; background: #ffe; border-left: solid 10px #fc6;">本文を入力</div>

布風デザイン

本文を入力

<div style="padding: 0.2em 0.5em; margin: 2em 1em; background: #def; box-shadow: 0px 0px 0px 10px #def; border: dashed 2px #fff;border-radius: 5px; ">本文を入力</div>

左右二重線

本文を入力

<div style="padding: 0.5em 1em; margin: 2em 0; color: #474747; background: #f5f5f5;/*背景色*/ border-left: double 7px #4cd;/*左線*/ border-right: double 7px #4cd;/*右線*/">本文を入力</div>

グラデーション

本文を入力

<div style="padding: 0.5em 1em; margin: 2em 0; font-weight: bold; color: #000;/*文字色*/ background: radial-gradient(#fff,#ccf); border: solid 3px #69d;/*線*/ border-radius: 10px;/*角の丸み*/">本文を入力</div>

グラデーションオーバーレイ

本文を入力

改行を入れてみる

<div style="background: -moz-linear-gradient(65deg, rgba(150,150, 255, 0.4), rgba(40,150,255, 0.7)),url(画像URL); background: -webkit-linear-gradient(65deg, rgba(150,150, 255, 0.4), rgba(40,150,255, 0.7)),url(画像URL); background: linear-gradient(25deg, rgba(150,150, 255, 0.4), rgba(40,150,255, 0.7)),url(画像URL); background-size:cover;padding: 0.5em 1em;color: #fff;font-weight: bold;">本文を入力

改行を入れてみる</p></div>