CSS3の画像フィルタを使って画像文字の色を変えたりする方法的なお話

よくあるマウスオーバーすると文字の色が変わるやつ。
あれってテキスト文字であればtransitionと組み合わせると、ふわっと色が変化していい感じになるけど、
画像文字だとすごくややこしい方法でやるかどうにかしないと出来なかったりする。

でもまぁtransition使って綺麗にふわっと、さらに簡単に出来たらいいなぁっていうことで、
今回はそんな難しくない方法でやってみる的なお話をば。

わかりづらいかもだけど、黒い文字と白い文字を用意してみた。
今回はデモ付き。

a img{
  transition:0.2s ease-in-out;
}

a:hover img{
  -webkit-filter:brightness(0);
  -moz-filter:brightness(0);
  -o-filter:brightness(0);
  -ms-filter:brightness(0);
  filter:brightness(0);
}

明るさを0にすることによって白い画像を黒くするっていう方法で色を変更する感じ。
だから黒い文字は黒いままだけど、白い文字は黒くなるよっていう。
これであれば画像1枚でいいし、text-indent:100%とか使わないでいいっていういい感じである。

ちなみにマウスオーバーしたら赤くしたいとかであるならば、 赤い画像文字を用意しておいて、標準状態で白になるように調整しておいて、
マウスオーバーしたら元の赤い画像文字になるような調整の仕方でいいんじゃないかと。
もしくは他の画像フィルタを使ってうまく調整するとか。

ただ難点なのはHTML5およびCSS3からであるのでもちろんIE8とかでは使えないっていう。
あとフィルタの中身によっては他のブラウザでは使えなかったりするのかどうなのか。
調べてみないとわからないけど。

ってな感じでHTML5およびCSS3の時代では中々に便利な機能がありますよっていう。
ただそろそろもっとフリーで使いやすいwebフォントが出てきてくれれば画像使わないで済むのになぁと思う的なみたいな。