CSSで紙（ノート？）風の見た目

前回のCSSでリボンが意外とストックされたので。
原理は前回と同じですが、こんなこともできますよという例。

今回は単色にしていますが、実際にはこのあたりから木目背景や紙のような背景を頂いて組み合わせたほうがそれっぽくなります。

note.html

<section>
    <h2>紙のような見た目にしてみましょう。</h2>
    <p>
        紙のような見た目に挑戦してみましょう。
        before 擬似要素と after 擬似要素を使うことで紙が重なっているような効果を出すことができます。
        CSS3 のドロップシャドウを使えば画像も最低限で済みますね。
    </p>
    <p>
        それにしてもサンプルとして書くことがあまりないですね。
        こういうとき、どういう文章にしたら良いのでしょう。
    </p>
</section>

note.css

body
{
    background: #FFE0B0;
}

section,
section:before,
section:after
{
    padding: 1em;
    background: white;
    box-shadow: 0 0 2px black;
    width: 30em;
    height: 16em;
}

section
{
    position: relative;
    z-index: auto;
}

    section:before,
    section:after
    {
        content: "";
        position: absolute;
    }

    section:before
    {
        left: 3px;
        top: 3px;
        z-index: -1;
    }

    section:after
    {
        left: 6px;
        top: 6px;
        z-index: -2;
    }