CSSで作るコンテンツ枠!紙の端が折れたようなデザイン

画像を使わずcssのみで、紙の端が折れたようなコンテンツ枠を作る方法です。 CSSのbox-shadowと疑似要素を使う事で、簡単に紙のような枠を作る事ができます。

そして少しCSSを調整するだけで、もうちょっとリアルな紙の質感になりますので、是非やってみて下さい。 ちなみに全てコピペするだけですぐにwebサイトやブログに実装可能です。

CSSコンテンツ枠一覧

掲載しているCSSのコンテンツ枠は、html・CSSをコピペするだけで導入できます。 最後に簡単な調整方法などを紹介しているので、詳しくはそちらをご覧下さい。

シンプルな紙ふうの枠

紙ふうのコンテンツ枠

シンプルな紙ふうのコンテンツ枠です。cssの疑似要素で端が折れたような感じにしています。

CSSコードを見る

<div class="sample sample01">
<h1>How to design</h1>
<p>With this feeling you can make content frame like old paper.
It is all css with only css. 
Moreover, paper-likeness is reproduced using box-shadow. Come paste so we can</p>
</div>
.sample{
  width: 200px;
  position: relative;
  margin: 0 0 0 30px;
  padding: 35px 30px;
}
.sample01{
  background: #ffffff;
  box-shadow: inset 0 0 30px rgba(230,220,228,0.8);
}
.sample:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 30px 30px 0;
  border-style: solid;
  width: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sample:before {
  background: #e3e3e3;
  border-color: #fff #fff #e3e3e3 #e3e3e3;
}
.sample h1{
  font-size: 24px;
  margin: 0 0 15px;
    color: #87b5de;
}
.sample p{
  font-family: 'arial narrow', serif;
  line-height: 1.4em;
}

古びた紙ふうのコンテンツ枠

古びた紙ふうのコンテンツ枠

色あせた質感の古びた紙ふうデザインのコンテンツ枠です。これも全てCSSのみで再現してあります。基本的には「>シンプルな紙ふうの枠」の色替えバージョンです。

CSSコードを見る

<div class="sample sample02">
<h1>How to design</h1>
<p>With this feeling you can make content frame like old paper. It is all css with only css. Moreover, paper-likeness is reproduced using box-shadow. Come paste so we can</p>
</div>
.sample{
  width: 200px;
  position: relative;
  margin: 0 0 0 30px;
  padding: 35px 30px;
}
.sample02{
  background: #fff9e7;
  box-shadow: inset 0 0 30px rgba(230,220,190,1);
}
.sample:before {
  content: " ";
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  border-width: 0 30px 30px 0;
  border-style: solid;
  width: 0;
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.sample02:before {
  background: #e8ddbd;
  border-color: #fff #fff #e8ddbd #e8ddbd;
}
.sample h1{
  font-size: 24px;
  margin: 0 0 15px;
  color: #603913;
}
.sample p{
  font-family: 'arial narrow', serif;
  line-height: 1.4em;
}

調整方法

出典 : Designed by Freepik

紙の質感をリアルにするために、内側にbox-shadowを設定しています。 例えば box-shadow: inset 0 0 30px rgba(230,220,190,1);というようになってますが、ボックスシャドウを設定すると通常は外側に影が付いていしまいます。 ですがinsetと記述する事で、ボックスシャドウを内側に設定することができます。

影の広がりはinsetの次に記述してある「0 0 30px」の部分の数値で変更できます。 一つ目の値が水平方向、2つ目が垂直方向、3つ目がぼかし距離となってます。 なので30pxの部分を変更すると枠全体の影の広がりを調整できます。

またrgbaで影の色を設定してますが、一番最後の「1」の部分の数値を0に近づけるほど影は薄くなります。

折れたような表現をするには

コンテンツ枠の端が折れたような表現をしていますが、これはボーダーの角が斜めになる事を活かして再現しています。

:before疑似要素の部分で、下側の辺を30pxのボーダーに設定し、それをtransformプロパティのrotateで回転させています。 ですがこれだけだとコンテンツ枠の右端が透けてしまうので、折れてない方のボーダーに背景色の白を設定しています。

.sample02:before {
  background: #e8ddbd;
  border-color: #fff #fff #e8ddbd #e8ddbd;
}

例えば上記は2つ目のコンテンツ枠デザインのCSSなんですが、実装するサイトの背景色に合わせて border-color: #fff #fff #e8ddbd #e8ddbd;の部分を調整するようにして下さい。 2つの#fffの部分をサイトの背景色と同じにすればおそらく問題ありません。