イシュー
- todomvc.com のTodoアプリのスタイルがかっこいいので、どんなcssを使っているのか見てみる
参考
Screen shot
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;
}
リスト:縦線
- チェックボックスとなりの縦線は、border-left と border-right で表現している
#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