【コピペで簡単】CSSのみで簡単に出来るノートや手紙のような紙背景8選

WEBデザインの制作時に後ろにボーダーが入ったノートのような背景にしたい場合がありませんか?

自分で実装しようと思うと、文字が大きくなった際のベースラインの調整や、質感、雰囲気など地味に大変ですよね。

そこで今回はコピペで一発。
CSSのみで簡単に実装出来るノートや手紙のような紙背景をご紹介します。

ぜひサイトに取り入れてみてください。読みやすくなること間違いなし!

ノート風用紙CSS

See the Pen
Notebook Paper
by Amanda Williamson (@amwill)
on CodePen.

ノート風用紙CSS2

See the Pen
Paper Textarea
by Marc Malignan (@MarcMalignan)
on CodePen.

ノート風用紙CSS3

See the Pen
CSS Notebook Paper
by Jesse Couch (@designcouch)
on CodePen.

折った紙が開く手紙風アニメーションCSS

See the Pen
CSS3 Paper Fold
by Jesse Wells (@jessenwells)
on CodePen.

ロールオーバーで紙がリフトするCSS

See the Pen
Pure CSS Paper Lift Effect
by Martin Wolf (@martinwolf)
on CodePen.

カードを紙に挟んだようなエフェクトCSS

See the Pen
CSS3 Paper-edge effect
by Felix Schwarzer (@slimsmearlapp)
on CodePen.

ロールオーバーで紙が折り曲がるCSS

See the Pen
Folding paper CSS3 animation
by Vadim Hermann (@Vaddo)
on CodePen.

手紙のような普通の紙風CSS

See the Pen
CSS Stacked Paper Effect
by Michael MartinSmucker (@mlms13)
on CodePen.