CSS3で付箋紙を張り付けたようなToDoリストをつくった

HTML/CSS jsdo.it

jsdo.it のイベント Q の応募用に、付箋紙を張り付けたようなデザインのToDoリストをつくってみた。

forked: Simple ToDo管理アプリ with HTML5 - jsdo.it - share JavaScript, HTML5 and CSS

解説のようなもの

付箋紙のようなデザインで、手書きでメモをするような感覚のToDoリストをつくりたかった。

元コードのCSSに手を加えて、

  1. 色を淡く
  2. ToDo項目ひとつひとつを独立させる
  3. 背景色とbox-shadowで付箋紙風に
  4. 完了をチェックマーク、削除をｘに
  5. マウスホバー時は影を濃くして、持ち上げてるみたいに
  6. 角度をつけることで、適当に貼ってるみたいに

こうすることで、付箋紙っぽさを表現してみました。

HTML や JavaScript にはなるべく手を加えず、CSSでデザインを変えるだけで表現できたらいいなーと思って作ってみた。

CSS3の便利セレクタ

E:nth-child(n) … n番目の子要素に適用 が便利！
.groupBox div.todoItem:nth-child(3n)

と書くことで、
class="groupBox" の子要素である、div class="todoItem" の 3,6,9…番目(3の倍数)に対してスタイルを適用することができる。
これでそれぞれちょっと違う傾きをつけてます。