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

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

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

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

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

ノート風用紙CSS


ノート風用紙CSS2


ノート風用紙CSS3


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


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

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

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

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