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.
