ボタンを画像なしでカスタマイズせよ！
さて、もうお気づきかと思うが、最近Googleのボタンのデザインが変わった。ソースを見ても画像が使われていない。これも、CSSだけでやっているらしい。というわけで、前回の角丸半透明ボックスにドロップシャドウに続いてボタンをカスタマイズしてみようと思う。
まず、ボタンに関するタグだが、ここでは「属性セレクタ」というものを使って、指定されたタグでなおかつ指定された属性のみを選択するようにする。ボタンに関係するタグは、buttonタグと、inputタグのtype属性がsubmitとresetのものである。したがってCSSで選択する場合以下のようになる。まぁ、厳密には、imageも含まれるだろうが、今日日のサイトで使っているのを見たことが無いので除外。
- input[type='submit']
- input[type='reset']
- input[type='button']
- button
とりあえず、灰色のボタンを作ろう。ただ、普通に作るとボタン同士がくっついてしまうので、margin:2px;を追加。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
では、グラデーションを加える。Operaではグラデーションが使えないので例によってGradient CSS Generetorを使う。高さは32ぐらいでいいだろう。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
どうだろうか。これだけで立体感が出る。
こんどは、box-shadowで影をつけてみよう。なお、IEはこれと同等の処理がないためShadowフィルタで代用する。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
ちなみに、IEはこうなる。まぁ仕方が無いね。
ボタンはやっぱり角丸じゃないと・・・
border-radiusを使って角丸ボタンにする。なお、ここからさきは、IEでは効果がでない。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
うーん、クールだね。
最近話題のtext-shadowを使う
最近text-shadowを使っているサイトが増えてきた。結構昔からある要素だが、IEのシェア低下と、CSS3の広がりから話題になり始めている。これは、ブラウザ依存の要素ではないため、単純にtext-shadowを入れるだけで反映される。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
どうだろう。立体感が出てきただろう。
ハイライトを変更しよう
さて、このままだとボタンをクリックした時やマウスが乗っかった時の質感がでない。そこで、その時のスタイルも変更しよう。今度は「擬似クラス」を用いて指定する。擬似クラスリンクの色を変更するときによく使う:link、:visited、:hover;、:activeである。この他にもいろいろあるが、今回使用するのは、マウスが乗っかった時の、:hoverと、クリックした時の、:activeである。
まずは、マウスが乗っかった時の:hoverから。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
次に、クリック時の:activeだ。ここでは、マウスをクリックしたときにボタンが押し込まれるようにアニメーションさせるため、position: relative; top: 1px;を追加する。色は、通常時のグラデーションを反転させるでいいだろう。また、押し込んでいる状態なので、ドロップシャドウは解除する。
PluginRenderer::executePluginBlock(): Plugin #code() is not implemented.
これで完成だ。IEの場合、:activeの反応が鈍いなどと問題があるが、概ね立体感のあるボタンが作れたと思う。