[CSS]Hover.cssを使ってみた

遅くなりましたが、あけましておめでとうございます。
今年も何かしら書き綴っていきますよ。

新年一発目は最近流行りのHover.cssの使い方をまとめてみます。

Hover.cssダウンロード

Hover.cssからダウンロードとデモが見れます。

実装方法

hover.cssをリンクし、要素にbuttonと実装したいスタイルのクラス名を指定するだけです。
head内に以下を挿入

<link href="css/hover.css" rel="stylesheet" media="all">

基本になるbuttonのスタイルは

.button {
  margin: .4em;
  padding: 1em;
  cursor: pointer;
  background: #ececec;
  text-decoration: none;
  color: #666666;
}

となってます。

ここで1つ注意しなければいけないことが、すべてのスタイル名(growやshrinkなどなど)はインラインにスタイル変更されていることです。
おそらく横並びにしやすいようにしてあるんだと思います。

CSSを嗜む方なら理解できると思いますが、ブロック要素に指定する場合はもう一度ブロック要素に上書きする必要がありますね。
ちなみに「a(インライン)」「div(ブロック)」「span(インライン)」でgrowを指定したサンプルを作りましたので参考にどうぞ。
「a(インライン)」「div(ブロック)」「span(インライン)」Hover.cssデモ
ソースは↓

<a href="#" class="button grow">GROW(a)</a>
<div class="button grow">GROW(div)</div>
<span class="button grow">GROW(span)</span>

IEに関して

IE10はほぼ対応していますがIE9以下はtransform等使ってますので崩れることはほぼありませんが動きは無視されます。
IE6～7ははず恩恵はないと思っていいでしょうね。

まとめ

最近、サイトのグローバルメニューはシンプル且つ分かりやすい使いやすいをモットーにデザインしていましたが、何かワンポイント欲しいなと思ってみつけました。と言うよりボクのgunosyで流れてきました。
CSSが分かれば色変えたりサイズ指定したりしてグローバルメニュー等に配置ってのも簡単なんじゃないでしょうか。
ただしMIT Licenseなので著作権表示をお忘れなく。