CSS Programming Advent Calendar 2012の2日目です。 まだ2日目ですし、あんまりややこしくないものをやろうと思ってストップウォッチを作ってみました。 CSS Stopwatch ダウンロード 右上のボタンでスタート、ストップ、リセットです。 上部中央のランプは色なしがリセット状態、青がスタート(カウント中)、赤が停止中を表します。 左のスイッチでは数字部分のカウントスタイルの変更ができます。これはリセット状態でないと変更できません。 :checked擬似クラス間接兄弟セレクタCSS CountersCSS 3D TransformsCSS AnimationsCSS GradientsRoot emViewport percentage lengthpointer-eventscalc()などを使っています。 IE 10, Firefox(17で確認),
![CSS Stopwatch (CSS Programming Advent Calendar 2012)](https://cdn-ak-scissors.b.st-hatena.com/image/square/a51bb369b492e4b453f08ca6dfedb466d0e54672/height=288;version=1;width=512/https%3A%2F%2Funformedbuilding.com%2Fassets%2Fimages%2Fog.png)