todomvc のスタイル

イシュー

  • todomvc.com のTodoアプリのスタイルがかっこいいので、どんなcssを使っているのか見てみる

参考

Screen shot

f:id:magnet88jp:20150308100845p:plain

text-shadow

  • h1 タイトルのエンボス効果は、text-shadowを使っている
#todoapp h1 {
    color: rgba(255, 255, 255, 0.3);
    font-size: 70px;
    font-weight: bold;
    position: absolute;
    text-align: center;
    text-rendering: optimizelegibility;
    text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
    top: -120px;
    width: 100%;
}

リスト:チェックボックス

#todo-list li .toggle:after {
content: '✔';
line-height: 43px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
}

参考

#toggle-all:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}
#toggle-all {
top: -56px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}

リスト:縦線

#todoapp:before {
    border-left: 1px solid #f5d6d6;
    border-right: 1px solid #f5d6d6;
    content: "";
    height: 100%;
    left: 40px;
    position: absolute;
    top: 0;
    width: 2px;
}

参考

リスト:取り消し線

  • リストの取り消し線は、text-decoration で表現している
#todo-list li.completed label {
    color: #a9a9a9;
    text-decoration: line-through;
}

参考

box-shadow

  • フッタ部分の付箋紙が重なっているような表現は、box-shadowを使っている
#footer:before {
    bottom: 31px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 0 -3px rgba(255, 255, 255, 0.8), 0 7px 1px -3px rgba(0, 0, 0, 0.3), 0 43px 0 -6px rgba(255, 255, 255, 0.8), 0 44px 2px -6px rgba(0, 0, 0, 0.2);
    content: "";
    height: 50px;
    left: 0;
    position: absolute;
    right: 0;
    z-index: -1;
}

参考

薄いボタン

  • 右下の薄いのはボタン
#toggle-all:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
}

screenshot 2

  • f:id:magnet88jp:20150308100854p:plain