制作ノート

2016.05.17

CSS3だけでつくる付箋紙(Post it)風Box

CSS3で作る付箋紙

付箋紙デザインはcss3だけで表現

昔話をすれば、インターネット黎明期のころ私は角丸の枠を作りたくて、一生懸命にTableタグと角丸の小さなGif画像を駆使してそれを実現していました。「角が丸いボックスが作れる」それだけでちょっとしたものを作った気分でした・・・

しかしHTMLが5まで進化し、CSSが登場したと思ったらもうバージョン3の今、角丸はborder-radiusの一行で終わりです。いやぁ、世の中便利になった!

それでは本題、CSS3だけでつくる付箋紙の作り方を紹介していきます。この付箋紙デザインは当サイトの「RECENT POSTS」でも利用しています(2016年5月現在)。


まずはサンプル

  • 付箋紙っぽいデザインの1
  • 付箋紙っぽいデザインの2
  • 付箋紙っぽいデザインの3
    高さは伸縮自在
    です。

HTML

今回はリストタグに応用しています。


基本のCSS


追加のCSS

奇数のリストタグと偶数のリストタグで背景色とマージンを変えると、よりバラつきのある雰囲気になります。


まとめ

一昔前なら画像でしか表現できなかったものが、background: linear-gradient() や transform: rotate() 、box-shadow などを上手く組み合わせてコードだけで表現できるようになりました。スマートフォンサイトなどでは極力画像の利用を避けたいので、CSS3で表現の幅が広がったことは本当に素敵ですね。


関連記事

Tags:

LINE STAMPLine Stamp

樋口こたつ&ミノムシのラインスタンプ、絶賛販売中です❤ スタンプキャラによる漫画もpixivにて超不定期連載中!!お暇なお嬢ちゃんお坊ちゃん方は是非お立ち寄りくださいッ

スライドショー内のスタンプをクリックすると、LINEストア内のスタンプページにジャンプします。