CSSだけで時計、とちょっと雑談。

, ,

時計作った

CSS Programming Advent Calendar 2012 の16日目です。
今回は時計を作ってみました。何もインタラクションのない時計です。

本当は、投票日ですので、の動きをちゃんと投票の出来る投票箱でも作ろうかと思ったのですが、
ちょっとやり始めたら(今の自分の実力では)数時間で作れるような感じではないということに気づき、
時計なら作れるかも、、と思い、時計作ってみました。

ピクセル単位でちょいちょいずれてます。ちゃんと計算して配置してません。。
時間が経てば、針がどんどんずれていくかも(笑)

製作時間: 30分

Webkitしか動きません、ベンダープレフィックスをちゃんとつければ、
恐らくIE以外では動くと思いますが、
(時間ないので、、)高速で書きたかった、sassも使っていません。

CSS3 Animationをスマホなどの実務でゴリゴリ書いている人は、
実際この時計の製作時間も30分ほどで終わりましたので、読むのがめっちゃ簡単。

今までCSS3 Animationを使ったことがない人でも、手始めとしては勉強になるかなーと思います。

CSS3 Animationを普段から使っている人でも、もしかしたらtransform-originという
プロパティを知らない人多いんじゃないかなー、、

transform-originは、rotateなどで動かす時に、ふつうは、動かす要素のど真ん中を軸に動かくのですが、
このtransform-originは、その軸の位置をずらすことができるのです。

デフォルトでは、transform-origin: 50% 50%;(ど真ん中)が指定されているかと思います。
で、今回は針の一番下を軸に動かしたいので、transform-origin: 50% 100%;という値を指定しています。

transform-origin: [X軸] [Y軸];といったイメージです。X軸で0%は一番左、Y軸で0%は一番上。

CSSプログラミングを学んでみるメリット

CSSプログラミングを実務では使ってはいけない。と言った声をよく見かけますが、本当にそのとおりだと思います(笑)。

だからといって、CSSプログラミングを勉強しないのは別の話です。

先日ゲコタンさんも書いていた投稿で、pointer-eventsというプロパティを初めて知りました。
で、そのプロパティ自体が実務では使えないかというと、全然そうでもありません。

pointer-eventsはiOSのほとんどで使えますし、Androidも現在普及しているバージョンでは殆ど動きます。

じっさい、pointer-eventsはめちゃくちゃ便利そうだし、使えると思います。

他にもいろんな人が作った変態CSSプログラミング(笑)のソースを読んでみると、
見たこともないプロパティがうじゃうじゃあります。

CSSプログラミング自体は変態だし、実務では使えないが、
それぞれのプロパティ自体は今ではスマホでも使えるものが数多く、勉強して損はないです。

CSSプログラミングをしたほうがいいとはいいませんが、一回ソースをぺらぺらーっと眺めて見ることはオススメです!!

以上!

あしたは先ほどお話にも出てきた、日本CSSプログラミング界権威?のGeckoTangさんです!