ボタンを色分け
ボタンに色を付けたり、シンボルを付けたり。そんな楽しい作業。
2011-12-26 18:06:10
入力時間 / 07:34
三色のボタンボタンに色とシンボルをつけてみた。こういう作業はやっぱり楽しいなぁ。
最初は単色だったのですが、直感的じゃないかなと思いまして「削除などの取り返しが付かないボタンは赤」、「取り返しが付くけど注意が必要なボタンは緑」、「その他は青」にしてみました。まぁなんとなくの色分けですけどね。
ボタンはbuttonやinputを使わずにボタン用のjsを起こしてみました。先日公開したIR.jsと原理はまったく同じなんですけどuiIRというのを作った。上記のような画像のbackground-positionを利用しいてマウスオーバー、マウスダウンを検知して動作するやつね。基本的に画像を用意してclass指定するのみなので、GUIを構成するときにすごく楽ちんなのだ。CSSに依存しないからね。
せっかくなのでaudioタグに対応してるブラウザの場合はフォーカスすると音がでるようにしたり。
これはちょっとウザいかなと反省している。
ボタンの形状はこれで完成じゃないと思うけど、後から一括で画像変更できるというのも、合理的なやり方だなと自負しております。面倒は本当に発明の母ですね。
使う人の事をアレコレ考えてUIをつくるってやっぱり楽しいもんですね。
TAG
P.1028