CSSでランダムボタン
CSS Programing Advent Callendar 2012 の15日目です。
日をまたいでしまい申し訳ないです。
カレンダーには乱数と書きましたが、乱数は言い過ぎですね。CSSだけでもランダムな結果を返すボタンを作ることができます。
これを利用してCSSおみくじを作りました。
そして以下が解説用のサンプルです
ご覧ください。
ランダムボタンというのは透明のlabelをanimationで動かして何のラベルがクリックされるかわからないという仕組みのボタンです。
ポイントは、acitve時にanimatio-play-state: pausedにして、アニメーションを一時停止しえあげることです。
animationとかで動かしてる要素のクリックは、mousedownしてからmouseupするまでにhover状態が外れてしまうと無効になってしまうからです。
ランダムボタンを最初に思い付いたときは、クリックしずらくなる問題が解決できずにしょんぼりしてました。
しかし、この辺りのことを12日目の1026さんの記事でも触れてますが、1026さんがCSSベースボールを作ったときに、同じ問題にぶつかり、xl1さんがacitve時にanimatio-play-state: pausedするという解決策を上げ、これでランダムボタンが作れるぞととてもワクワクしました。
おみくじはとても簡易なものですが、ランダム的なことを取り扱えると、作れるものがとても広がると思いますので、意欲のあるCSSプログラマーの方は是非是非、壮大なものを作ってください!
次、16日目(現在既に16日になってしまいましたが)は negic さんです。よろしくお願いします。