CSSとJSでアナログ時計①枠を作る


前回紹介したアナログ時計の仕組みを数回に分けて説明したいと思います。

前回の記事

今回の完成品
css_clock3

黒い丸

まずは(200px)×(200px)の黒い丸を描画します。

css_clock1

空っぽのdivタグを用意し、縦横を同じサイズにして背景を黒に。
そしてborder-radiusを幅と高さの丁度半分に指定すれば円になります。

白い丸

次に、黒い丸の中に(180px)×(180px)の白い丸を描画します。

css_clock2

サイズは20px小さい180px。
position:relativeに設定し、topとleftに10pxずつ指定して真ん中に表示されるようにしています。

影を設定し、見た目をちょっとリッチにします。

css_clock3

insetキーワードを指定すると、内側に影が付きます。
黒い丸は外側に、白い枠は内側に影を付けることで、周りの黒い部分が浮き出てるような感じにしました。

*

今回はここまで!
次回は目盛と数字を追加していきます。

関連記事

コメントする